.offer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.offer-card.has-cover-image {
    isolation: isolate;
    aspect-ratio: 9 / 5;
    min-height: 0;
    background: #061421;
}

.offer-card.has-cover-image::before {
    z-index: 2;
    background: linear-gradient(90deg, rgba(2, 12, 24, .88) 0%, rgba(2, 12, 24, .58) 48%, rgba(2, 12, 24, .06) 100%);
}

.offer-cover-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #061421;
}

.offer-cover-image::before,
.mobile-offer .mobile-offer-cover::before {
    content: "";
    position: absolute;
    inset: -16px;
    background: var(--offer-image) center / cover no-repeat;
    z-index: 0;
    filter: blur(13px) saturate(.88) brightness(.7);
    transform: scale(1.08);
}

.offer-cover-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    position: relative;
    z-index: 1;
}

.offer-card.has-cover-image .offer-copy {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    max-width: min(72%, 390px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .42);
}

.mobile-offer.has-cover-image {
    isolation: isolate;
    aspect-ratio: 9 / 5;
    min-height: 0;
    background: #071426;
}

.mobile-offer.has-cover-image::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 13, 28, .88) 0%, rgba(3, 13, 28, .58) 56%, rgba(3, 13, 28, .05) 100%);
}

.mobile-offer .mobile-offer-cover {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #071426;
}

.mobile-offer .mobile-offer-cover::before {
    display: block;
}

.mobile-offer .mobile-offer-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    filter: none;
    position: relative;
    z-index: 1;
}

.mobile-offer.has-cover-image > div {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    max-width: 76%;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .5);
}

@media (max-width: 560px) {
    .offer-grid {
        display: flex;
        align-items: stretch;
    }

    .offer-card.has-cover-image .offer-copy {
        max-width: 78%;
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .offer-card:first-child {
        grid-column: auto;
    }
}