@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
 
: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%);

    --fs-base: 1.125rem;
}

@media screen and (min-width: 1440px) {
    :root {
        --fs-base: 1.2rem;
    }
}

/* ------------ */
/* GLOBAL */
/* ------------ */

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

body {    
    height: 100vh;
    background-color: #0000000a;

    font-family: "DM Sans", sans-serif;
    font-size: var(--fs-base);    

    display: flex;
    justify-content: center;    
}

img {
    width: 100%;    
}

.title-1 {    
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    margin-block: 1rem; 
    text-wrap: balance;   
}

.title-2 {    
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-block: 1rem;  
    font-weight: 400;
    text-wrap: balance;     
}

.title-3 {    
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-block: 1rem;  
    text-wrap: balance; 
}

p {
    font-size: var(--fs-base);
    margin-block: 1rem;
    line-height: 1.3;
}

/* -------------------- */
/* Mobile First */
/* -------------------- */

.main-grid {    
    padding: 16px;    
    max-inline-size: 500px; 
}

.subgrid-left,
.subgrid-right {    
    display: grid;
    gap: 16px
}

.grid-item {
    padding: 16px;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    align-items: center; 
    
    overflow: clip;
}

.item-1 {
    background-color: var(--Purple-500);
    color: var(--White); 
    text-align: center;   
    
    span {
        color: var(--Yellow-500);
    }
    > img {
        width: 50%;
    }
}

.item-2 {
    background-color: var(--White);
    
    > img {
        filter: drop-shadow( 0 0 1rem hsl(0 0% 0% / .15));
        border-radius: 100vw;
        order: -1;        
    }    
}

.item-3 {    
    background-color: var(--Yellow-500);
    color: var(--Black);    
    align-items: start;

    > img {
        width: 70%;
        margin-bottom: -30px;               
    }
}

.item-4 {
    background-color: var(--Purple-100);
    text-align: center;
}

.item-5 {
    background-color: var(--Purple-500);
    color: var(--White);
    align-items: center;
    text-align: center;

    > img {
        width: 80%;
        order: -1;
    }    
}

.item-6 {
    background-color: var(--White);
    align-items: start; 
    
    h2 {
        margin-block: 0;
    }
    
    > img {
        width: 50%;
    }
}

.item-7 {
    background-color: var(--Yellow-100);
    align-items: start;
    > img {
        width: 50%;
    }
    span {
        color: var(--Purple-500);
        font-style: italic;
    }
}

.item-8 {
    align-items: start;
    background-color: var(--Yellow-500);
    > img {
        width: 60%;
    }
}

@media screen and (min-width: 700px) { 
    
    body {
        height: auto;
        margin-block: 24px;
        display: flex;
        justify-content: center;
        margin-inline: auto;
    }

    .main-grid {
        max-width: 80%;         
                       
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;        
    }

    .subgrid-right {
        height: auto;
        grid-column: 2/5;

        display: grid;
        grid-template-columns: repeat(3, 1fr);        
        gap: 16px;
        
        .grid-item.item-1 {        
            grid-column: 1/3;   
                   
        }

        .grid-item.item-2{
            grid-column: 1/2;
            grid-row: 2/3;            
        }

        .grid-item.item-3{
            grid-column: 2/3;   
            grid-row: 2/3;            

            display: flex;

            > img {                
                width: 100%;
                margin-bottom: -75px;                           
            }                 
        }

        .grid-item.item-4{
            grid-row: 1/3;
            grid-column: 3/4;
            text-align: left;
            > img {
                margin-right: -60px;                
            }   
        }

        .grid-item.item-5{
            grid-row: 3/4;
            grid-column: 2/4 ;
            flex-direction: row;
            > img {
                width: 40%;                
            }
        }

        .grid-item.item-6{
            grid-row: 3/4;
            grid-column: 1/2;
        }
    }    

    .subgrid-left {        
        grid-column: 1/2;
        grid-row: 1/2;
        
        gap: 16px;

        .item-7 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            > img {
                min-width: 70%;
            }
        }

        .item-8 {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            > img {
                width: 100%;
            }
        }
    }
        

}