.trending-product {
    position: relative;
    width: 100%;
    overflow: visible !important;
}

.trending-product .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--size-6);
}

/* Fallback for gap property - IE 11 doesn't support gap */
@supports not (gap: 1px) {
    .trending-product .container {
        margin: calc(var(--size-6) / -2);
    }
    .trending-product .container > * {
        margin: calc(var(--size-6) / 2);
    }
}

.trending-product .container .trending {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: auto;
    box-shadow: var(--box-shadow);
    -webkit-border-radius: var(--size-4);
    -moz-border-radius: var(--size-4);
    -ms-border-radius: var(--size-4);
    border-radius: var(--size-4);
}

/* Image link styling */
.trending-product .container .trending .image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    -webkit-border-radius: var(--size-4);
    -moz-border-radius: var(--size-4);
    -ms-border-radius: var(--size-4);
    border-radius: var(--size-4);
    overflow: hidden;
}

.trending-product .container .trending .image-link img {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

/* Product info container */
.trending-product .container .trending .product-info {
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--size-3);
    width: 100%;
    height: 100%;
    z-index: -1;
    padding: var(--size-4);
}

.trending-product .container .trending .product-info h2 {
    margin: 0;
    font-size: var(--size-3);
}

.trending-product .container .trending .product-info > * {
    color: var(--color-white);
    margin: 0;
}

.trending-product .container .trending .product-info .product-description {
    color: var(--color-white);
    font-size: var(--size-3);
}

.trending-product .container .trending .product-info .button {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: var(--size-8);
    font-size: var(--size-3);
}

.trending-product .container .trending .product-info .button a {
    border: calc(var(--size-0) * 2) solid var(--title-color);
}

.trending-product .container .trending .product-info .button a:hover {
    color: var(--title-color);
}

.trending-product .container .trending .product-info .button::after {
    background-color: var(--title-color);
}

.trending-product .container .trending .product-info .terms-conditions {
    font-size: var(--size-3);
    margin-top: auto;
}

/* Default trending card - 5:1 aspect ratio on desktop */
.trending-product .container .trending {
    width: 100%;
}

@supports (aspect-ratio: 1) {
    @media screen and (min-width: 768px) {
        .trending-product .container .trending {
            aspect-ratio: 5 / 1;
        }
    }
}

/* Large trending card */
.trending-product .container .trending.size-large {
    width: 100%;
    flex: 0 0 100%;
}

@supports (aspect-ratio: 1) {
    @media screen and (min-width: 768px) {
        .trending-product .container .trending.size-large {
            aspect-ratio: 32 / 9;
        }
    }
}

/* Portrait aspect ratio for large cards on mobile */
@supports (aspect-ratio: 1) {
    @media screen and (max-width: 767px) {
        .trending-product .container .trending.size-large {
            aspect-ratio: 1 / 1;
        }
    }
}

/* Small trending card */
.trending-product .container .trending.size-small {
    width: 100%;
    flex: 0 0 100%;
}

@media screen and (min-width: 768px) {
    .trending-product .container .trending.size-small {
        width: calc(50% - var(--size-4));
        flex: 0 0 calc(50% - var(--size-4));
    }
}

@supports (aspect-ratio: 1) {
    @media screen and (min-width: 768px) {
        .trending-product .container .trending.size-small {
            aspect-ratio: 5 / 2;
        }
    }
}