﻿@media only screen and (max-width: 499px) {

    .household-section-1-image {
        background-image: url('../../assets/Household 480/Asset 56.webp');
    }

    .household-section-2-image {
        background-image: url('../../assets/Household 480/Asset 55.webp');
    }

    .household-section-3-image {
        background-image: url('../../assets/Household 480/Asset 54.webp');
    }
}

@media only screen and (max-width: 800px) {

    .reverse-div {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .household-split-section {
        height: 800px;
        display: flow;
        width: 100%;
    }

        .household-split-section > .info-block {
            height: 50%;
        }

            .household-split-section > .info-block > .header {
                font-size: xx-large;
            }

            .household-split-section > .info-block > .text {
                width: 100%;
                padding: 20px 0;
                font-size: medium;
            }

    .household-section-1-image,
    .household-section-2-image,
    .household-section-3-image,
    .household-section-4-image {
        height: 50%;
    }



    .household-link-section > .container > .header {
        font-size: xx-large;
        padding: 0;
    }

    .household-link-section > .container > .text {
        font-size: medium;
        padding: 0;
    }

    .household-link-section > .container > .button-container {
        padding: 0;
    }

        .household-link-section > .container > .button-container > .button {
            font-size: x-large;
            align-content: center;
        }

    .household-link-section > .floating-duck {
        position: unset;
        background-size: contain;
        width: 100%;
        height: 300px;
    }

    .household-link-section > .container {
        height: 500px;
    }

    .household-link-section {
        height: 900px;
    }

        .household-link-section > .container > .social-media-container {
            padding: 0;
            justify-self: center;
            width: 80%;
            padding: 30px 50px;
        }
}
