/* -------------------- BODY STYLES -------------------- */

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

body {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;
    margin: 30px 300px;
    background-color: #F5F5F5;
}

.no-margin {
    margin: 0;
}

/* -------------------- TEXT STYLES -------------------- */

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h2, h3 {
    letter-spacing: -2px;
}

.highlight-purple {
    font-style: italic;
    font-weight: 500;
    color: hsl(256, 67%, 59%);
}

.highlight-yellow {
    font-weight: 500;
    color: hsl(39, 100%, 71%);
}

/* -------------------- GRID CONTAINER -------------------- */

.grid-container {
    display: grid;
    grid-template-areas:
        'card1 card2 card2 card3'
        'card1 card2 card2 card3'
        'card1 card2 card2 card3'
        'card1 card2 card2 card3'
        'card1 card5 card6 card3'
        'card4 card5 card6 card3'
        'card4 card5 card6 card3'
        'card4 card7 card8 card8'
        'card4 card7 card8 card8'
        'card4 card7 card8 card8';
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 25px;
}

/* -------------------- GRID ITEMS -------------------- */

.card1 { 
    grid-area: card1; 
    background-color: hsl(31, 66%, 93%);
    border-radius: 8px;
    padding: 50px 25px;
    color: hsl(0, 0%, 7%);
}

.card2 { 
    grid-area: card2; 
    background-color: hsl(256, 67%, 59%);
    border-radius: 8px;
    padding: 20px;
    color: hsl(0, 0%, 100%);
    text-align: center;
    align-content: center;
}

.card3 { 
    grid-area: card3; 
    background-color: hsl(254, 88%, 90%);
    border-radius: 8px;
    padding: 30px 0 30px 25px;
}

.card4 { 
    grid-area: card4; 
    background-color: hsl(39, 100%, 71%);
    border-radius: 8px;
    padding: 25px;
    color: hsl(0, 0%, 7%);
}

.card4 > h2 {
    margin-top: 0;
}

.card5 { 
    grid-area: card5; 
    background-color: hsl(0, 0%, 100%);
    border-radius: 8px;
    padding: 20px 20px;
    color: hsl(0, 0%, 7%);
    align-content: end;
}

.card6 {
    grid-area: card6; 
    background-color: hsl(39, 100%, 71%);
    border-radius: 8px;
    padding: 10px 20px 0 20px;
    align-content: end;
}

.card7 { 
    grid-area: card7; 
    background-color: hsl(0, 0%, 100%);
    border-radius: 8px;
    padding: 20px;
    color: hsl(0, 0%, 7%);
    align-content: center;
}

.card8 { 
    grid-area: card8; 
    background-color: hsl(256, 67%, 59%);
    border-radius: 8px;
    padding: 20px;
    color: hsl(0, 0%, 100%);
    align-content: center;
}

.card8-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 5px;
    align-items: center;
}

.card8-grid-img > img {
    width: 100%;
}

/* -------------------- GRID IMAGES -------------------- */

.card1 > img {
    width: 100%;
    margin-top: 20px;
}

.card2 > img {
    width: 150px;
    margin-top: 10px;
}

.card3 > img {
    height: 280px;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    object-fit: cover;
    object-position: left top;
}

.card4 > img {
    width: 100%;
    margin-top: 10px;
}

.card5 > img {
    height: 60px;
    max-width: 100%;
    object-fit: cover;
    object-position: left top;
}

.card6 > img {
    width: 100%;
    height: 75px;
    margin-top: 10px;
    display: block;
    object-fit: cover;
    object-position: left top;
}

.card7 > img {
    max-width: 90%;
    margin-top: 15px;
}

/* -------------------- LARGE SCREENS STYLES -------------------- */

@media screen and (max-width: 1199.98px) {
    body {
        margin: 20px;
    }
}

/* -------------------- TABLES STYLES -------------------- */

@media screen and (max-width: 991.98px) { 
    /* GRID CONTAINER */

    .grid-container {
        grid-template-areas:
            'card1 card2'
            'card3 card4'
            'card5 card6'
            'card7 card8';
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    
    /* GRID ITEMS */

    .card1, .card2, .card3, .card4, .card5, .card7, .card8 {
        padding: 20px;
    }
    
    .card3, .card4 {
        text-align: center;
        align-content: center;
    }

    .card5 {
        align-content: center;
    }

    /* GRID IMAGES */

    .card1 > img, .card2 > img, .card4 > img, .card6 > img, .card7 > img {
        width: 60%;
    }

    .card3 > img {
        width: 60%;
        height: auto;
    }

    .card4 > img {
        margin-top: 20px;
    }

    /* OTHERS */

    .card4 > h2 {
        margin: 0;
    }

    body {
        margin: 20px;
    }
}

/* -------------------- MOBILE STYLES -------------------- */

@media screen and (max-width: 767.98px) { 
    /* GRID CONTAINER */

    .grid-container {
        grid-template-areas:
            'card2'
            'card5'
            'card6'
            'card3'
            'card8'
            'card7'
            'card1'
            'card4';
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
    }

    /* GRID ITEMS */

    .card2 {
        padding: 40px;
    }

    .card3 {
        text-align: center;
        padding: 20px;
    }

    .card4 {
        text-align: left;
        padding: 20px;
    }

    .card6 {
        padding: 20px 20px 0 20px;
    }

    .card7 {
        padding: 20px;
    }

    .card8 {
        padding: 20px 40px;
        text-align: center;
    }

    .card8-grid {
        grid-template-columns: 1fr;
    }

    /* GRID IMAGES */

    .card1 > img, .card2 > img, .card4 > img, .card7 > img  {
        width: 60%;
    }
    
    .card3 > img {
        width: 100%;
        height: auto;
    }

    .card5 > img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .card6 > img {
        width: 60%;
        height: 150px;
    }

    .card8-grid-img > img {
        width: 200px;
    }

    /* OTHERS */

    .card4 > h2 {
        margin: 0;
    }

    body {
        margin: 20px;
    }
}