/* change by talha - homepage promo banner grid ([ads style="8"]): 2 tall side banners + 2x2 grid + 1 tall banner */
/* old code: (none - new section) */
.tp-banner-grid8 {
    display: grid;
    grid-template-columns: 1fr 2.1fr 2.1fr 1.9fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "promo1 a b heels promo2"
        "promo1 c d heels promo2";
    gap: 16px;
    height: 420px;
    max-width: 1400px;
    margin: 0 auto;
}

.tp-banner-grid8-promo1 { grid-area: promo1; }
.tp-banner-grid8-a { grid-area: a; }
.tp-banner-grid8-b { grid-area: b; }
.tp-banner-grid8-c { grid-area: c; }
.tp-banner-grid8-d { grid-area: d; }
.tp-banner-grid8-heels { grid-area: heels; }
.tp-banner-grid8-promo2 { grid-area: promo2; }

.tp-banner-grid8-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #f3f7ff;
}

.tp-banner-grid8-thumb {
    position: absolute;
    inset: 0;
}

.tp-banner-grid8-thumb picture,
.tp-banner-grid8-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.tp-banner-grid8-item .tp-banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 20px;
    pointer-events: none;
}

.tp-banner-grid8-item .tp-banner-content a {
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .tp-banner-grid8 {
        height: 320px;
        gap: 10px;
    }
}

@media (max-width: 767.98px) {
    .tp-banner-grid8 {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        gap: 10px;
    }

    .tp-banner-grid8-item {
        aspect-ratio: 16 / 9;
    }

    .tp-banner-grid8-promo1,
    .tp-banner-grid8-heels,
    .tp-banner-grid8-promo2 {
        width: 100%;
    }

    .tp-banner-grid8-a,
    .tp-banner-grid8-b,
    .tp-banner-grid8-c,
    .tp-banner-grid8-d {
        width: calc(50% - 5px);
        aspect-ratio: 1 / 1;
    }
}
/* end change by talha */