@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');

.navbar {
    font-family: 'DM Sans', sans-serif;
}

.cards {
    width: 70vw;
    justify-content: space-between;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 50px;
}

.cards-2 {
    display: flex;
    margin: 10px;
    width: 85vw;
    justify-content: space-between;
    margin-inline: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
.wrapper {
    display: grid;
    flex-wrap: wrap;
    grid-auto-rows: 100px;
    margin-top: 20px;
    width: 85vw;
    row-gap: 10px;
    column-gap: 10px;

    margin-inline: auto;
  }

.wrapper >div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box1 {
grid-column: 1/3;
grid-row: 1/5;
}

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

.box3 {
grid-column: 4;
grid-row: 1/3;
}
.box4 {
grid-column: 5;
grid-row: 1/3;
}
.box5 {
grid-column: 3;
grid-row: 3/5;
}
.box6 {
grid-column: 4;
grid-row: 3/5;
}
.box7 {
grid-column: 5;
grid-row: 3/5;
}

.box8 {
grid-column: 1/3;
grid-row: 5/9;
}
.box9 {
grid-column: 3/6;
grid-row: 5/9;
} 

.ps-1 {
width: 85vw;
margin-inline: auto;
}

.ps-2 {
width: 85vw;
margin-inline: auto;
}

@media only screen and (max-width: 600px) {
.container {
    text-align: start;
}

}

@media only screen and (max-width: 992px) {
.container {
    flex-wrap: nowrap;
}

}