rmcg.dev/projects/FrontendMentor/newbie/meet-landing-page/css/style.css

/*
 * Design sizes:
 *      375x2215
 *      768x2128
 *      1440x1895
 */

*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: auto;
}

:root {
    /* General Colors */
    --col-dark-cyan: hsla(192, 37%, 48%, 1);
    --col-lighter-cyan: hsla(192, 54%, 64%, 1);
    --col-light-cyan: hsla(192, 90%, 77%, 1);
    --col-dark-magenta: hsla(268, 34%, 53%, 1);
    --col-lighter-magenta: hsla(268, 55%, 71%, 1);
    --col-light-magenta: hsla(268, 100%, 86%, 1);
    --col-dark-blue-gray: hsla(240, 21%, 20%, 1);
    --col-light-gray: hsla(240, 10%, 57%, 1);
    --col-slightly-off-white: hsla(0, 0%, 98%, 1);

    /*  */
    --col-background: var(--col-slightly-off-white);
    --col-background-footer: var(--col-dark-cyan);
    --col-headers: var(--col-dark-blue-gray);
    --col-body: var(--col-light-gray);
    --col-button-text: white;
    --col-button-download-ver-text: var(--col-light-magenta);
    --col-button-download-background: var(--col-dark-magenta);
    --col-button-download-background-hover: var(--col-lighter-magenta);

    /* Typography */
    --fs-page-header: 2.5rem;
    --lh-page-header: 110%;
    --fw-page-header: 900;

    --fs-main-page-body: 1rem;
    --lh-main-page-body: 162%;
    --fw-main-page-body: 500;

    --fs-sell-tag: 1rem;
    --lh-sell-tag: 162%;
    --ls-sell-tag: 4px;
    --fw-sell-tag: 900;

    --fs-second-heading: 2rem;
    --lh-second-heading: 112%;
    --fw-second-heading: 900;

    --fs-footer-header: 2rem;
    --lh-footer-header: 112%;
    --fw-footer-header: 900;

    --fs-footer-body: 1.125rem;
    --lh-footer-body: 144%;
    --fw-footer-body: 500;

    --fs-button: 1rem;
    --lh-button: 162%;
    --fw-button: 900;

    --fs-circle-number: 1rem;
    --lh-circle-number: 162%;

    --padding-btn: 1rem 2.5rem;
    --border-radius-btn: 1.8125rem;

    --image-footer: url(../assets/mobile/image-footer.jpg);

    --line-height: 5.25rem;
}

body {
    min-height: 100vh;

    font-family: "Red Hat Display", sans-serif;

    text-align: center;

    background-color: var(--col-background);
}

.logo {
    margin-top: 3rem;
    width: unset;
    height: 100%;
}

.hero-img {
    margin-top: 3.175rem;
    height: 9.5625rem;
    object-fit: cover;

    vertical-align: top;
}

.hero-img-left,
.hero-img-right {
    display: none;
}

.primary-section__heading {
    margin-top: 3rem;
    margin-inline: auto;

    width: 10ch;

    color: var(--col-headers);
    font-size: var(--fs-page-header);
    line-height: var(--lh-page-header);
    font-weight: var(--fw-page-header);
}

.primary-section__body {
    margin-top: 1.5rem;

    color: var(--col-body);
    font-size: var(--fs-main-page-body);
    line-height: var(--lh-main-page-body);
    font-weight: var(--fw-main-page-body);
    margin-inline: 1.5rem;
}

.btn-block {
    margin-top: 2rem;

    display: flex;
    flex-direction: column;

    justify-content: center;

    --col-button-download-ver-text: var(--col-light-cyan);
    --col-button-download-background: var(--col-dark-cyan);
    --col-button-download-background-hover: var(--col-lighter-cyan);
}

.btn {
    padding: var(--padding-btn);
    border-radius: var(--border-radius-btn);

    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: var(--fw-button);

    text-decoration: none;
    display: inline-block;
    align-self: center;

    color: var(--col-button-text);
}

.btn span {
    margin-left: 0.25rem;
}

.btn-download {
    background-color: var(--col-button-download-background);
}

.btn-download span {
    color: var(--col-button-download-ver-text);
}

.btn-download:where(:focus, :hover) {
    background-color: var(--col-button-download-background-hover);
}

.btn-info {
    --padding-btn: 1rem 1.8125rem;
    margin-top: 1rem;
    background-color: var(--col-dark-magenta);
}

.btn-info:where(:hover, :focus) {
    background-color: var(--col-light-magenta);
}

.circle-plus-line {
    margin-top: 4rem;
    position: relative;
    left: 50%;
    border-left: 1px solid hsla(240, 10%, 57%, 0.25);
    height: calc(var(--line-height) + 1.75rem);
    width: 1px;
}

.circle-number {
    position: relative;
    border-radius: 50%;
    padding: 0.9375rem 1rem;

    font-size: 1rem;
    line-height: 162%;
    font-weight: 900;
    color: var(--col-body);
    background-color: var(--col-background);

    text-align: center;

    border: 1px solid hsla(240, 10%, 57%, 0.25);
    width: 3.5rem;

    top: var(--line-height);
    left: calc(50% - 1.75rem);
}

.images-of-users {
    margin-top: calc(4rem + 1.75rem);

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1.5rem;
}

.images-of-users img {
    flex: 0 0 40%;
    width: 40%;
    border-radius: 0.5rem;
}

.overline {
    margin-top: 4rem;
    text-transform: uppercase;

    font-size: var(--fs-sell-tag);
    line-height: var(--lh-sell-tag);
    letter-spacing: var(--ls-sell-tag);
    font-weight: var(--fw-sell-tag);
    color: var(--col-dark-cyan);
}

.secondary-header {
    margin-top: 1.5rem;

    margin-inline: 1.5rem;

    color: var(--col-headers);
    font-size: var(--fs-second-heading);
    line-height: var(--lh-second-heading);
    font-weight: var(--fw-second-heading);
}

.secondary-body {
    margin-top: 2rem;
    margin-inline: 1.5rem;

    color: var(--col-body);
    font-size: var(--fs-main-page-body);
    line-height: var(--lh-main-page-body);
    font-weight: var(--fw-main-page-body);
}

.footer {
    background: linear-gradient(
            hsla(192, 37%, 48%, 0.9),
            hsla(192, 37%, 48%, 0.9)
        ),
        var(--image-footer) no-repeat top center;
    background-size: contain;

    color: var(--col-slightly-off-white);

    padding: 3.625rem 1.5rem 4.5rem 1.5rem;
}

.footer__header {
    margin-top: 2.25rem;

    font-size: var(--fs-footer-header);
    line-height: var(--lh-footer-header);
    font-weight: var(--fw-footer-header);
}

.footer__body {
    margin-top: 1.5rem;

    font-size: var(--fs-footer-body);
    line-height: var(--lh-footer-body);
    font-weight: var(--fw-footer-body);
}

.footer .btn-download {
    margin-top: 2rem;
}

@media screen and (min-width: 28.125rem) {
    .primary-section__body,
    .secondary-body {
        width: 30ch;
        margin-inline: auto;
    }

    .secondary-header {
        width: 14ch;
        margin-inline: auto;
    }
}

@media screen and (min-width: 48rem) {
    /* 768px */
    :root {
        /* Typography */
        --fs-page-header: 3rem;
        --lh-page-header: 100%;

        --fs-second-heading: 2.5rem;
        --lh-second-heading: 110%;

        --fs-main-page-body: 1rem;
        --lh-main-page-body: 162%;

        --fs-footer-header: 2.5rem;
        --lh-footer-header: 110%;

        --image-footer: url(../assets/tablet/image-footer.jpg);
    }

    .hero-img {
        margin-top: 3.75rem;
        height: 18.9375rem;
    }

    .btn-block {
        margin-top: 2rem;
        flex-direction: row;
        gap: 1rem;
    }

    .primary-section__heading {
        margin-top: 4.5rem;
    }

    .primary-section__body {
        width: 40ch;
        margin-inline: auto;
    }

    .btn-info {
        margin-top: unset;
    }

    .circle-plus-line {
        margin-top: 5rem;
    }

    .images-of-users {
        margin-top: 6rem;

        gap: 0.6875rem;

        flex-flow: row nowrap;
    }

    .images-of-users img {
        width: 10.25rem;
        flex: unset;
    }

    .overline {
        margin-top: 3rem;
    }

    .secondary-header {
        margin-top: 1rem;

        width: 16ch;
    }

    .secondary-body {
        width: 49ch;
    }

    .footer {
        margin: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__header {
        margin-top: 2.125rem;
        width: 14ch;
    }

    .footer__body {
        margin-top: 2rem;
        width: 48ch;
    }

    .footer .btn-download {
        margin-top: 2.5rem;
    }
}

@media screen and (min-width: 90rem) {
    /* 1440px */
    :root {
        /* Typography */
        --fs-page-header: 4rem;
        --lh-page-header: 100%;

        --fs-second-heading: 2.5rem;
        --lh-second-heading: 110%;

        --fs-main-page-body: 1.125rem;
        --lh-main-page-body: 144%;

        --fs-footer-header: 2.5rem;
        --lh-footer-header: 110%;

        --image-footer: url(../assets/desktop/image-footer.jpg);
    }

    .logo {
        margin-top: 5rem;
    }

    .top-section {
        margin-top: 3.75rem;
        display: flex;
        gap: 7.5rem;
        justify-content: center;
        overflow: hidden;
    }

    .hero-img {
        display: none;
    }

    .hero-img-left,
    .hero-img-right {
        display: block;
        width: 24.625rem;
        object-fit: cover;
    }

    .hero-img-left {
        align-self: flex-start;
    }

    .hero-img-right {
        align-self: flex-end;
    }

    .primary-section__heading {
        margin-top: 2.75rem;

        justify-self: center;
    }

    .primary-section__body {
        margin-top: 2.1875rem;
    }

    .circle-plus-line {
        margin-top: 7.3125rem;
    }

    .btn-block {
        margin-top: 2rem;
    }

    .images-of-users {
        gap: 1.875rem;
        margin-top: 5.625rem;
    }

    .images-of-users img {
        width: 15.9375rem;
    }

    .overline {
        margin-top: 5rem;
    }

    .footer {
        flex-direction: row;
        justify-content: center;
        gap: 5.5rem;
        text-align: left;

        padding: 7.25rem 0 6.5rem 0;
    }

    footer .circle-plus-line {
        margin-top: 4.5rem;
    }

    .footer__header {
        margin-top: unset;
    }

    .footer__body {
        margin-top: unset;

        width: 29ch;
    }

    .footer .btn-download {
        margin-top: unset;
    }
}