@font-face {
    font-family: 'DMSansItalic';
    src: url('../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900; /* If it's a variable font */
    font-style: italic;
}


html, body {
    margin: 0;
    padding: 0;
    background-color:rgb(229, 229, 229);
    flex: 1;
    height: 100vh;
    font-family: 'DMSansItalic', sans-serif;
}

.container {
    display: flex;
    align-items: center;
    justify-self: center;
    height: 100vh;
    margin: 50px;
    max-width: 800px;
    min-height: 500px;
}
.parent {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
.div1 { 
    /* font-family: DMSans-Regular; */
    grid-area: 1 / 3 / 4 / 9;
    background-color: hsl(256, 77%, 62%);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.div1 h1 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 0;
}

.div1 p {
    font-size: 9px;
    font-weight: 0.15em;
}

.div1 img {
    height: 15%;
}
.div2 { 
    grid-area: 1 / 9 / 6 / 11;
    background-color: hsl(256, 87%, 79%);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}

.div2 img {
    width: 100%;
    padding-top: 10px;
}

.div3 {
     grid-area: 6 / 6 / 8 / 11; 
     background-color: hsl(256, 67%, 59%);
     margin: 5px;
     padding: 10px;
     border-radius: 10px;
     display: flex;
}

.div3 img {
    width: 100%;
    height: 130px;
    padding: 5px;
}

.div4 { 
    grid-area: 1 / 1 / 5 / 3;
    background-color: hsl(48, 69%, 89%);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}

.div4 h1{
    font-size: 20px;
    font-weight: 520;
    margin-bottom: 15px;
    font-style: bold;
}

.div4 img {
    width: 100%;
}

.div5 { 
    grid-area: 5 / 1 / 8 / 3;
    background-color: hsla(48, 100%, 41%, 0.707);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}

.div5 img {
    width: 100%;
    padding-top: 10px;
}

.div5 h1 {
    font-size: 18px;
    font-weight: 520;
    margin-bottom: 15px;
    font-style: bold;
}

.div6 {
    grid-area: 4 / 6 / 6 / 9;
    background-color: hsla(48, 100%, 41%, 0.707);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}

.div6 img {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.div7 { 
    grid-area: 4 / 3 / 6 / 6;
    background-color: hsla(0, 0%, 100%, 0.707);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
 }

 .div7 img {
    width: 100%;
    padding-top: 10px;
}

.div8 {
    grid-area: 6 / 3 / 8 / 6;
    background-color: hsla(0, 0%, 100%, 0.707);
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}
.div8 img {
    width: 100%;
    size: 100px;
}

@media screen and (max-width: 800px) {
    .container {
        flex-direction: column;
    }
    .parent {
        display: flex;
        flex-direction: column;
    }

    /* .parent>div>img{
        width: 80%;
        height: 180px;
    } */
     
    
}