
.condo-name {
    font-size: 40px;
}

.condo-tagline {
    font-size: 14px;
}

.home-container {
    width: 86%;
    border-radius: 8px;
    padding: 18px 8px 18px 8px; /* top,right,bottom,left */
    color: hsl(201, 54%, 46%);
    font-family: "Federo", cursive;
    margin: 12px;
}

.img-container {
    font-size: 20px;
}

.img-elem {
    width: 90%;
    margin-top: 20px;
    border-radius: 8px;
}

/* The original font-size for home-body is 20px.
/* When the screen is 1620px or smaller */
@media screen and (max-width: 1620px) {
    .condo-tagline {
        font-size: 14px;
    }

    .condo-name {
        font-size: 34px;
    }

    .home-container {
        border-radius: 6px;
        width: 86%;
    }

    .img-container {
        font-size: 18px;
    }

    .img-elem {
        width: 98%;
        margin-top: 18px;
        border-radius: 4px;
    }
}

@media screen and (max-width: 1440px) {
    .condo-tagline {
        font-size: 12px;
    }

    .condo-name {
        font-size: 29px;
    }

    .home-container {
        border-radius: 6px;
        width: 86%;
    }

    .img-container {
        font-size: 16px;
    }

    .img-elem {
        width: 98%;
        margin-top: 16px;
        border-radius: 4px;
    }
}

@media screen and (max-width: 960px) {
    .condo-tagline {
        font-size: 12px;
    }

    .condo-name {
        font-size: 24px;
    }

    .home-container {
        border-radius: 6px;
        width: 94%;
    }

    .img-container {
        font-size: 14px;
    }

    .img-elem {
        width: 98%;
        margin-top: 14px;
        border-radius: 4px;
    }
}

@media screen and (max-width: 768px) {
    .condo-tagline {
        font-size: 10px;
    }

    .condo-name {
        font-size: 18px;
    }

    .home-container {
        border-radius: 4px;
        width: 98%;
    }

    .img-container {
        font-size: 13px;
    }

    .img-elem {
        width: 98%;
        margin-top: 10px;
        border-radius: 4px;
    }
}

