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 {
    height: 100vh;

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

    text-align: center;
}

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

.hero-img {
    /* height: 100%; */
}

.hero-img {
    outline: 1px solid red;
    margin-top: 3.175rem;
    height: 153px;
    object-fit: cover;

    vertical-align: top;
}

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

.hero-img-left img,
.hero-img-right img {
}

.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);
    width: 30ch;
    margin-inline: auto;
}

.btn-block {
    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 {
    margin-top: 2rem;
    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: 15px 16px;

    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: 1.75rem; */
    top: var(--line-height);
    left: calc(50% - 1.75rem);
}

.images-of-users {
    margin-top: calc(4rem + 28px);
    /* height: 19.375rem; */
    /* display: flex;
    justify-content: space-around;
    flex-wrap: wrap; */

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 24px;
}

.images-of-users img {
    /* width: auto; */
    /* height: 100%; */
    /* flex: 0 1 auto; */
    flex: 0 0 40%;
    width: 40%;
    border-radius: 0.5rem;
}

.outline {
    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: auto;

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

    width: 14ch;
}

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

    width: 30ch;

    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: 58px 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);
}

@media screen and (min-width: 48rem) {
    /* 768px */
    :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/tablet/image-footer.jpg);
    }

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

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

    .footer__header {
        width: 15ch;
    }

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

@media screen and (min-width: 90rem) {
    /* 1440px */
    :root {
        --image-footer: url(../assets/desktop/image-footer.jpg);
    }

    .circle-number {
    }

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

    .footer__body {
        width: 29ch;
    }
}