@charset "utf-8";

html, body {
    margin: 0px;
    padding: 0px;
}

.gs-bf-tvs {
    position: relative;
    max-width: 1300px;
    margin: 0 auto 20px auto;
}

.gs-bf-tvs img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.gs-bf-tvs img.gm-banner-img-mob {
    display: none;
}

/* Desktop: tiles (466x270) sit on the 1280x300 background, vertically centred */
.gs-bf-tvs .d-gs-lnk-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34.41%;
}
.gs-bf-tvs .d-gs-lnk-wrapper--1 {
    left: 27.5%;
}
.gs-bf-tvs .d-gs-lnk-wrapper--2 {
    left: 63.5%;
}

.gs-bf-tvs .d-gs-lnk {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    font-size: 0px !important;
    text-decoration: none;
}

/* Hover effect: tile zooms in slightly */
.gs-bf-tvs .d-gs-lnk-wrapper img {
    transform: scale(100%);
    will-change: transform;
    transition: transform 0.4s;
    width: 100%;
    height: auto;
}
.gs-bf-tvs .d-gs-lnk-wrapper:hover img {
    transform: scale(104%);
}

@media screen and (max-width: 1300px) {

    .gs-bf-tvs {
        margin: 0 15px 20px 15px;
    }

}

/* Mobile: single image (720x1112) with two cards; link boxes cover each card */
@media screen and (max-width: 767px) {

    .gs-bf-tvs {
        margin: 0 0px 20px 0px;
    }

    .gs-bf-tvs img.gm-banner-img-mob {
        display: block;
    }

    .gs-bf-tvs img.gm-banner-img-desk {
        display: none;
    }

    .gs-bf-tvs .d-gs-lnk-wrapper {
        left: 3.611%;
        width: 92.78%;
        height: 32.73%;
        transform: none;
    }

    .gs-bf-tvs .d-gs-lnk-wrapper--1 {
        top: 29.68%;
    }

    .gs-bf-tvs .d-gs-lnk-wrapper--2 {
        top: 64.57%;
    }

}