:root {
    --purple-100: hsl(254, 88%, 90%);
    --purple-500: hsl(256, 67%, 59%);
    --yellow-100: hsl(31, 66%, 93%);
    --yellow-500: hsl(39, 100%, 71%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 7%);
}

@font-face {
    font-family: 'dm-sans';
    src: url(assets/fonts/DMSans-VariableFont_opsz\,wght.ttf);
}

@font-face {
    font-family: 'sans-italic';
    src: url(assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.ttf);
}

body {
    font-family: 'dm-sans';
    font-weight: 500;
    font-size: 1.125rem; /* 18px converted to rem */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 98%);
    white-space: no-wrap;
}

p {
    margin: 0;
}

span {
    font-family: 'sans-italic';
}

img {
    height: auto;
    width: 12.5rem; /* 200px converted to rem */
}

.main-container {
    width: 85vw;
    display: grid;
    gap: 0.9375rem; /* 15px converted to rem */
    margin: 1.875rem auto; /* 30px converted to rem */
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 45vh 20vh 20vh;
    grid-template-areas: 
        "card-7 card-1 card-1 card-4"
        "card-7 card-2 card-3 card-4"
        "card-8 card-2 card-3 card-4"
        "card-8 card-6 card-5 card-5"
        "card-8 card-6 card-5 card-5";
}

.card-1, .card-2, .card-3, .card-4, .card-5, .card-6, .card-7, .card-8 {
    border-radius: 0.9375rem; /* 15px converted to rem */
    overflow: hidden;
}

.card-1 {
    grid-area: card-1;
    background-color: var(--purple-500);
    color: var(--white);
    text-align: center;
    padding: 1.875rem; /* 30px converted to rem */
}

.card-1 img {
    width: 10.9375rem; /* 175px converted to rem */
    height: auto;
}

.card-2 {
    grid-area: card-2;
    background-color: var(--white);
    padding: 0.9375rem; /* 15px converted to rem */
}

.card-2 img {
    width: 23.4375rem; /* 375px converted to rem */
}

.card-2 p {
    padding-right: 2.5rem; /* 40px converted to rem */
}

.card-3 {
    grid-area: card-3;
    background-color: var(--yellow-500);
    padding: 0.9375rem; /* 15px converted to rem */
}

.card-3 img {
    width: 14.0625rem; /* 225px converted to rem */
}

.card-4 {
    grid-area: card-4;
    background-color: var(--purple-100);
    padding-bottom: 1.25rem; /* 20px converted to rem */
    padding-top: 1.875rem; /* 30px converted to rem */
    padding-left: 3.125rem; /* 50px converted to rem */
}

.card-4 img {
    height: 18.75rem; /* 300px converted to rem */
    width: auto;
}

.card-5 {
    grid-area: card-5;
    background-color: var(--purple-500);
    color: var(--white);
    display: flex;
    align-items: center;
    padding: 0.9375rem; /* 15px converted to rem */
}

.card-5 p {
    padding: 1.875rem; /* 30px converted to rem */
    padding-right: 0;
}

.card-6 {
    grid-area: card-6;
    background-color: var(--white);
    padding: 0.9375rem; /* 15px converted to rem */
}

.card-6 img {
    padding-top: 1.875rem; /* 30px converted to rem */
}

.card-7 {
    grid-area: card-7;
    background-color: var(--yellow-100);
    padding: 4.375rem 1.25rem; /* 70px 20px converted to rem */
}

.card-8 {
    grid-area: card-8;
    background-color: var(--yellow-500);
    padding: 1.25rem; /* 20px converted to rem */
}

.card-8 p {
    padding-right: 1.875rem; /* 30px converted to rem */
    padding-bottom: 3.125rem; /* 50px converted to rem */
}

.card-8 img {
    padding-left: 1.25rem; /* 20px converted to rem */
}

.purple-word {
    color: var(--purple-500);
}

.yellow-word {
    color: var(--yellow-500);
    font-family: 'dm-sans';
}

.percent {
    font-size: 4rem;
    font-family: 'dm-sans';
    padding-right: 1.5625rem; /* 25px converted to rem */
}

.text-bigger {
    font-size: 4rem;
    font-weight: 500;
}

.text-big {
    font-size: 2rem;
    font-weight: 500;
}

.text-smaller {
    font-weight: 400;
}

.attribution {
    text-decoration: none;
    color: var(--purple-500);
    margin-left: 33%;
}

.attribution a {
    text-decoration: none;
    color: var(--purple-500);
}

.attribution a:hover {
    color: var(--yellow-500);
}

@media (max-width: 750px) {
    .main-container {
        grid-template-columns: auto;
        grid-template-rows: 10% 10% 15% 25% 20% 15% 10% 10%;
        grid-template-areas: 
            "card-1"
            "card-2"
            "card-3"
            "card-4"
            "card-5"
            "card-6"
            "card-7"
            "card-8";
    }

    .card-1 img {
        padding-top: 1.5625rem; /* 25px converted to rem */
        width: 9.375rem; /* 150px converted to rem */
    }

    .card-2 img {
        width: 15.625rem; /* 250px converted to rem */
    }

    .card-3 {
        padding-bottom: 0;
    }

    .card-3 img {
        width: 10.9375rem; /* 175px converted to rem */
        padding-left: 0;
        padding-bottom: 0;
        padding-top: 0.625rem; /* 10px converted to rem */
    }

    .card-4 {
        padding: 1.25rem; /* 20px converted to rem */
    }

    .card-4 img {
        height: 12.5rem; /* 200px converted to rem */
        padding: 1.25rem 0; /* 20px converted to rem */
    }

    .card-4 p {
        text-align: center;
    }

    .card-5 {
        display: block;
        padding-bottom: 0;
    }

    .card-5 img {
        padding-left: 1.5625rem; /* 25px converted to rem */
    }

    .card-5 p {
        font-size: 1.5rem;
        padding: 1.25rem 1.875rem; /* 20px 30px converted to rem */
        text-align: center;
    }

    .card-6 img {
        width: 10rem; /* 160px converted to rem */
    }

    .card-7 {
        padding: 1.25rem; /* 20px converted to rem */
    }

    .card-7 img {
        padding-top: 1.25rem; /* 20px converted to rem */
    }

    .card-8 img {
        padding: 0;
        padding-top: 0.625rem; /* 10px converted to rem */
    }

    .card-8 p {
        padding: 0;
    }

    .percent {
        display: block;
    }

    .text-big {
        font-size: 1.2rem;
        line-height: 1.25rem; /* 20px converted to rem */
    }

    .text-bigger {
        font-size: 2rem;
        line-height: 1.875rem; /* 30px converted to rem */
    }

    .text-small {
        font-size: 1rem;
    }
    
    .text-smaller {
        font-size: 0.9rem;
    }

    .attribution {
        margin-left: 11%;
    }
}