.img-container {
    position: relative;
}

.img-container::after {
    content: "";
    float: left;
    padding-bottom: 100%;
}

.img  {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header {
    font-family: "Glorify", sans-serif;
    font-weight: 400;
}

.mb-6 {
    margin-bottom: 4rem !important; 
}

.custom-gap {
    gap: 70px; 
}


#last-element {
    padding-bottom: 100px !important; 
}

/* XXL screen sizes */
@media (min-width: 1400px) {
    
}

/* XL screen sizes */
@media (max-width: 1399px) {
    .custom-gap {
        gap: 50px; 
    }
}

/* Large screen sizes */
@media (max-width: 1199px) {
    p {
        font-size: 13px;
    }

    .custom-gap {
        gap: 30px; 
    }
}


/* Medium screen sizes */
@media (max-width: 991px) {
    p {
        font-size: 12px;
    }
}

/* small screen sizes */
@media (max-width: 767px) {
    .img-container::after {
        padding-bottom: 40%;
    }

    .img-2{
        object-position: top;
    }

    .custom-gap {
        gap: 15px;
    }
}

/* Target extra small screens and above (Bootstrap "xs" breakpoint, all screens) */
@media (max-width: 575px) {

}