.area-container {
display: flex;
flex-direction: column;
gap: 44px;
}
.area-container .area-items {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
gap: 33px;
}
.area-container .area-items .area-item {
background-color: var(--white);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px 33px 22px;
box-shadow: 0px 8px 18px rgb(32 106 186 / 8%);
}
.area-container .area-items .area-item .area-item__img {
aspect-ratio: 1;
width: 35px;
object-fit: contain;
}
.area-container .area-items .area-item .area-item__title {
color: var(--green-color);
font: normal 700 16px/24px var(--primary-font), sans-serif;
text-align: center;
}
@media (max-width: 768px) {
.area-container {
align-items: center;
}
.area-container .area-items {
grid-template-columns: repeat(2, 1fr);
gap: 20px 18px;
}
}