/* Reusable helpers — apply only where needed */
.image-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    display: block;
}

.image-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

.image-contain {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Soft global guard — do NOT force height:auto on every sized icon/logo */
img {
    max-width: 100%;
}

/* Portfolio / product media frames */
#portfolioGrid.stories-carousel .portfolio-card .card-image,
.products-list.products-carousel .product-img-container {
    aspect-ratio: 16 / 9;
    height: auto !important;
    overflow: hidden;
}

#portfolioGrid.stories-carousel .portfolio-card .card-image img,
.products-list.products-carousel .product-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Project detail heroes & section screenshots */
.project-hero-image,
.section-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    object-fit: cover;
    display: block;
}

/* Event / blog style thumbs */
.cover-image,
.event-image,
.winner-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    object-fit: cover;
    display: block;
}

/* Team / profile avatars stay square */
.team-modal-img,
.team-carousel-item .team-image,
.gr-avatar,
.author-avatar img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.gr-avatar {
    width: 52px;
    height: 52px;
}

/* Logos, badges, social icons — never crop */
.logo-img,
.footer-logo-img,
.footer-badges-items img,
.social-icon img,
.de_social-icons img,
.social-link img {
    max-width: 100%;
    height: auto;
    object-fit: contain !important;
}

/* Client logo tiles: keep tile box, fit logo inside without crop */
#portfolio-carousel .portfolio-item .portfolio-image {
    object-fit: contain !important;
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    .project-hero-image,
    .section-image,
    .cover-image,
    .event-image,
    .winner-image {
        aspect-ratio: 16 / 9;
    }
}