/**
 * Styling for the banner block.
 */

.page-container .banner {
    display: flex;
    gap: var(--spacing-7);
    padding: var(--spacing-7);
    border-radius: 4px;
}

.banner.wide {
    grid-column: 1 / -1;
}
.banner.compact {
    grid-column: 3 / -3;
}
.banner.bg {
    background-color: var(--color-grey-100);
}
.banner.border {
    border: 1px solid var(--color-grey-150);
}
.banner.reversed {
    flex-direction: row-reverse;
}

.banner .text-pane {
    flex-grow: 1;
    word-break: break-word;
}

.banner .text-pane .heading {
    margin-bottom: var(--spacing-6);
}
.banner .text-pane .text-button {
    width: fit-content;
    margin-top: var(--spacing-8);
}

.banner .img-box {
    flex: 0 0;
}
.banner.wide .img-box {
    flex-basis: 392px;
}
.banner.compact .img-box {
    flex-basis: 320px;
}
.banner .img-box .img {
    background-size: cover;
}

/* Breakpoint L */
@media screen and (min-width: 1080px) and (max-width: 1320px) {
    .banner.compact {
        grid-column: 2 / -2;
    }

    .banner.wide .img-box {
        flex-basis: 320px;
    }
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    .banner.wide .img-box {
        flex-basis: 286px;
    }
}

/* Breakpoints M and S */
@media screen and (min-width: 0px) and (max-width: 1080px) {
    .banner.compact {
        grid-column: 1 / -1;
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    .banner {
        flex-direction: column;
    }
    .banner.reversed {
        flex-direction: column-reverse;
    }
    .banner.wide .img-box,
    .banner.compact .img-box {
        flex-basis: unset;
    }
    .banner .img-box .img {
        width: 100%;
        height: 0;
        padding-top: calc(9 / 16 * 100%); /* 16:9 aspect ratio */
    }
}