.dm-sans-font{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #F5F5F5;
    max-width: 1140px;
    margin: auto;
}
img{
    max-width: 100%;
}

.container-box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    min-height: 100vh;
    margin-block: 4rem;
}
.container-1{
    grid-row: 1/4;
    display: grid;
    gap: 1.5rem;
}

.container1-5{
    border-radius: 1.25rem;
}

.first{
    background-color: var(--Yellow-100);
    padding: 4rem 2rem;
}

.first-title{
    font-size: 2.5rem;
    font-weight: 600;
    margin-block-end: 1.5rem;
}

.quicker{
    color: var(--Purple-500);
}

.second-title{
    font-size: 2.5rem;
    font-weight: 600;
    margin-block-end: 3rem;
}
.second{
    background-color: var(--Yellow-500);
    padding: 1.5rem;
}
.container-2{
   grid-column: 2/4;
   background-color: var(--Purple-500);
   text-align: center;
   border-radius: 1.25rem;
   padding: 3rem;
}

.c2-img{
    width: 45%;
}

.c2-title{
    font-size: 4rem;
    color: var(--White);
    font-weight: 500;
    margin-block-end: 1.5rem;
}

.tenx{
    color: var(--Yellow-500);
}

.c2-sub-title{
    font-size: 1.25em;
    color: var(--White);
}
.container-3{
    grid-column: 4/5;
    grid-row: 1/3;
    background-color: var(--Purple-100);
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 2.5rem;

}
.container-3 > *{
    margin-block-end: 2rem;
}
.c3-title{
    font-size: 2rem;
    font-weight: 500;
}

.c3-img{
    min-width:200%;
}

.c3-description{
    font-size: 1.125rem;
    font-weight: 500;
}
.container-4{

    overflow: hidden;
    border-radius: 1.25rem;
    padding: 1.5rem;
    background-color: var(--White);
    align-content: center;
}
.c4-title{
    font-size: 2rem;
    margin-block-start: 1.5rem;
}

.c4-img{
    min-width: 150%;
}

.container-5{
    background-color: var(--Yellow-500);
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;

}

.c5-title{
    font-size: 2rem;
    margin-block-end: 1.55rem;
}

.c5-img{
    position: absolute;
    width: calc(100% - 3rem)
}
.container-6{
    grid-column: 2/3;
    background-color: var(--White);
    border-radius: 1.25rem;
    padding: 2rem;
}

.c6-title{
    font-size: 3.5rem;
    font-weight: 600;
}

.c6-sub-title{
    font-size: 1.125rem;
    font-weight: 500;
    margin-block-end: 2rem;
}
.container-7{
    grid-column: 3/5;
    background-color: var(--Purple-500);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 1.25rem;
    padding: 1.75rem;
    align-items: center;
    gap: 1rem;
}

.c7-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--White);
}


@media screen and (max-width:576px){
    .container-box{
        grid-template-columns: 1fr;
        margin: 1rem;
    }

    .container-box > *{
        grid-column: span 1;
        grid-row: span 1;
    }
    .container-7{
        grid-template-columns: 1fr;
    }
    .container-1{
        grid-row: 7/8;
    }
    .first-title{
        font-size: 1.6rem;
        margin-block-end: 1rem;
    }
    .first-img{
        max-width: 60%;
    }
    .second-title{
        font-size: 1.6rem;
        margin-block-end: 1rem;
    }
    .second-img{
        max-width: 80%;
    }
    .c2-title{
    font-size: 2.5rem;
    }
    .c2-sub-title{
        font-size: 1rem;
    }

    .c3-img{
    min-width:100%;
    }
    .container-3{
        text-align: center;
    }
    .c3-title{
        font-size: 1.25rem;
    }
    .c3-description{
        font-size: 1rem;
    }
    .c4-title{
        font-size: 1.3rem;
    }
    .c4-img{
    min-width: 100%;
    }
    .container-4{
        grid-row: 2/3;
    }
    .container-5{
        top: 1.5rem;
        grid-row: 3/4;
        height: calc(90% - 1.25rem);
    }
    .c5-title{
        font-size: 1.5rem;
    }
    .c5-img{
        position: relative;
    }
    .c6-title{
        font-size: 2.5rem;
    }
    .c6-sub-title{
        font-size: 1rem;
    }
    .c6-img{
        max-width: 60%;
    }
    .container-7{
        text-align: center;
    }
}