img.slider {
    width: 100%;
    aspect-ratio: 3;
    object-fit: cover;
}
.about {
    display: flex;
    padding: 50px 4%;
}
.aboutBox {
    width: 60%;
}
h2.aboutTitle {
    margin: 0;
    font-size: 2rem;
    text-align: center;
    color: var(--cl-primary);
}
p.aboutText {
    font-size: 1.125rem;
    padding: 24px 0;
    text-align: justify;
}
.aboutBoxImage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}
img.aboutImage {
    width: 35%;
}
.postBox {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 25px;
}
.post {
    display: grid;
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--cl-brd);
    border-radius: var(--radius-3);
}
img.postImage {
    width: 100%;
    border-radius: var(--radius-3);
}
p.postDescription {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cl-muted);
}
@media only screen and (max-width: 767px) {
    img.slider {
        aspect-ratio: 16 / 9;
    }
    .about {
        flex-wrap: wrap;
        padding: 30px 8%;
    }
    .aboutBox, .aboutBoxImage {
        width: 100%;
    }
    p.aboutText {
        margin: 0;
    }
    .postBox {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}