rmcg.dev/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css

/*
* Design Sizes:
*   Mobile: 375x2615
*   Tablet: 768 × 1760
*   Desktop: 1440 × 1845
*/

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

:root {
    /* Colors */
    --col-medium-purple: hsla(234, 25%, 52%, 1);
    --col-dark-purple: hsla(234, 53%, 16%, 1);
    --col-light-purple: hsla(233, 10%, 56%, 1);

    --col-hot-pink: hsla(341, 92%, 62%, 1);
    --col-light-pink: hsla(341, 100%, 83%, 1);

    --col-white: hsla(0, 0%, 100%, 1);

    --col-orange-to-pink: linear-gradient(180deg, #ff6f48 0.04%, #f02aa6 100%);
    --col-purple-to-pink: linear-gradient(180deg, #4851ff 0%, #f02aa6 99.92%);

    --col-orange-to-pink-hover: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)
        ),
        linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%);
    --col-purple-to-pink-hover: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)
        ),
        linear-gradient(180deg, #4851ff -54.32%, #f02aa6 100%);

    --col-white-to-off-white: linear-gradient(180deg, #ffffff 0%, #f0f1ff 100%);

    /* Typography */
    --fs-heading-xl: 3.5rem;
    --lh-heading-xl: 4.4375rem;
    --fw-headings: 800;

    --fs-heading-l: 2.5rem;
    --lh-heading-l: 3.1875rem;

    --fs-heading-m: 1.5rem;
    --lh-heading-m: 2rem;

    --fs-heading-s: 1.25rem;
    --lh-heading-s: 1.5625rem;

    --fs-body-m: 1.125rem;
    --lh-body-m: 1.75rem;
    --fw-body-m: 500;

    --fs-body-s: 1rem;
    --lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */
    --fw-body-s: 500;
    /* Sizing */

    --border-radius: 1.75rem;

    /* Other */
}

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

body {
    min-height: 100vh;
    font-family: "Plus Jakarta Sans", sans-serif;

    display: flex;
    flex-direction: column;

    background: var(--col-white-to-off-white);
}

.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0 1rem;
}

.logo {
    width: 5.5625rem;
    vertical-align: center;
}

.btn {
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    font-weight: 700;

    padding: 0.625rem 1.5rem;
    border-radius: var(--border-radius);
    text-decoration: none;
}

.banner__getting-started {
    background-color: var(--col-dark-purple);
    color: var(--col-white);
}

.banner__getting-started:where(:focus, :hover) {
    background-color: var(--col-medium-purple);
}

.intro {
    margin-top: 2.375rem;
    margin-inline: 1rem;
    overflow: hidden;
}
.intro__header {
    font-size: var(--fs-heading-l);
    line-height: var(--lh-heading-l);
    font-weight: var(--fw-headings);

    color: var(--col-dark-purple);
}

.intro__body,
.card__body {
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    font-weight: var(--fw-body-s);

    color: var(--col-light-purple);
}
.intro__body {
    margin-top: 1.625rem;
}
.intro__getting-started {
    display: inline-block;
    margin-top: 1.5rem;

    padding: 0.9375rem 2.3438rem;

    background: var(--col-orange-to-pink);
    color: var(--col-white);
    align-self: center;
}

.intro__getting-started:where(:focus, :hover) {
    background: var(--col-orange-to-pink-hover);
}

.intro__image {
    display: block;
    margin-top: 1.875rem;
    /* width: 100%; */
    z-index: -1;
}

.intro__image img {
    display: block;
    margin-left: -13%;
    width: 125%;
}

main {
    margin-inline: auto;
}

.cards {
    display: flex;
    flex-direction: column;

    margin-top: -1.125rem;
    margin-inline: 1rem;
    gap: 2.375rem;

    justify-content: center;

    max-width: 70rem;
}
.card {
    border-radius: 0.625rem;
    background: white;

    padding-inline: 1.75rem;

    max-width: 21.875rem;
}
.cards__header {
    font-size: var(--fs-heading-m);
    line-height: var(--lh-heading-m);
    font-weight: var(--fw-headings);

    color: var(--col-white);
    background: var(--col-orange-to-pink);
    padding: 1.5rem 1.875rem 2rem 1.6875rem;
}
.card__image {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    top: -1.4375rem;
}
.card__header {
    margin-top: 0rem;

    font-size: var(--fs-heading-s);
    line-height: var(--lh-heading-s);
    font-weight: var(--fw-headings);

    color: var(--col-dark-purple);
}
.card__body {
    margin-top: 1rem;
}
.card__getting-started {
    display: inline-block;
    font-size: 1.125rem;
    padding: unset;
    margin-top: 1.5rem;
    margin-bottom: 2rem;

    color: var(--col-hot-pink);
}

.card__getting-started:where(:focus, :hover) {
    color: var(--col-light-pink);
}

.footer {
    margin-top: 5.25rem;
    background: var(--col-dark-purple);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.25rem 1rem;
}

.footer__getting-started {
    background: var(--col-purple-to-pink);
    color: var(--col-white);
}

.footer__getting-started:where(:focus, :hover) {
    background: var(--col-purple-to-pink-hover);
}

@media screen and (min-width: 48rem) {
    header {
        position: relative;
        overflow: hidden;
    }
    .banner {
        padding: 1.5rem 2.4688rem 0 2.4688rem;
    }
    .intro {
        margin-top: 6.1875rem;
        margin-left: 2.4688rem;
        overflow: unset;
        display: flex;
        flex-direction: row;
        flex: 1 0 50%;
        /* width: 51%; */
        padding-bottom: 13.125rem;
        position: relative;
    }

    .intro > div {
        flex-basis: 56%;
    }

    .intro__image {
        display: block;
        position: absolute;
        top: -18.1875rem; /*-38vw;*/
        right: -25.25rem; /*-52.5vw;*/
    }

    .intro__image img {
        display: block;
        /* margin-right: 113%; */
        width: 43.4375rem;
    }

    .cards {
        margin-top: unset;
        margin-inline: 2.4688rem;

        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.6875rem;
        row-gap: 3.3125rem;
    }

    .cards > * {
        flex-basis: 49%;
    }

    .card {
        padding-inline: 2rem 1.3125rem;
    }

    .cards__header {
        padding: 3.5rem 1.3125rem 8.6875rem 2rem;
    }

    .footer {
        margin-top: 5.5rem;
        padding: 2.25rem 2.4688rem;
    }
}

@media screen and (min-width: 90rem) {
    /* 1440px */
    :root {
        --fs-heading-m: 2rem;
        --lh-heading-m: 2.5rem;

        --fs-heading-s: 1.5rem;
        --lh-heading-s: 1.875rem;
    }

    .btn {
        font-size: var(--fs-body-m);
        line-height: var(--lh-body-m);

        padding: 0.875rem 1.9688rem;
    }

    .banner {
        padding: 1.5rem 10.3125rem 0 10.3125rem;
    }

    .intro {
        margin-top: 10.875rem;
        margin-left: 10.3125rem;
        padding-bottom: 15.625rem;
    }

    .intro > div {
        flex-basis: 38%;
    }

    .intro__header {
        font-size: var(--fs-heading-xl);
        line-height: var(--lh-heading-xl);
    }

    .intro__body {
        font-size: var(--fs-body-m);
        line-height: var(--lh-body-m);
    }

    .intro__getting-started {
        padding: 1.1875rem 1.9375rem 1rem 2rem;
        margin-top: 2.625rem;
    }

    .intro__image {
        top: -26.9375rem; /*-38vw;*/
        right: -30.375rem; /*-52.5vw;*/
    }

    .intro__image img {
        width: 65.375rem;
    }

    .cards {
        margin-inline: 10.3125rem;
        gap: 1.875rem;
        row-gap: 5rem;
    }

    .cards__header {
        padding: 4rem 2rem 8.625rem 2rem;
    }

    .card {
        display: flex;
        flex-direction: column;
        padding-inline: 2rem;
    }

    .card__header {
        margin-top: 0.5rem;
    }

    .card__body {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        font-size: var(--fs-body-m);
        line-height: var(--lh-body-m);
    }

    .card__getting-started {
        padding: unset;
        /* margin-top: ; */
        margin-top: auto;
        margin-bottom: 2.5rem;
    }

    .logo {
        width: 7.125rem;
    }

    .footer {
        margin-top: 8.75rem;
        padding: 2rem 10.3125rem;
    }
}