/**
 * Styling for the single slice module.
 */

.single-slice {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-12) var(--spacing-9);
    gap: var(--spacing-8);
    background-color: var(--color-bg-page);
}
.single-slice.reversed {
    flex-direction: row-reverse;
}
.single-slice.surface {
    background-color: var(--color-bg-surface-1);
}

.single-slice .text-pane {
    flex-basis: calc(5 / 12 * 100%);
    word-break: break-word;
}

.single-slice .text-pane .heading {
    margin-bottom: var(--spacing-7);
}

.single-slice .text-pane .blurb {
    margin-bottom: var(--spacing-8);
}

.single-slice .img-box,
.single-slice .video-box {
    flex-basis: calc(7 / 12 * 100%);
}

.single-slice .img-box .img {
    width: 100%;
    height: 0;
    background-size: cover;
    padding-top: 100%; /* 1:1 aspect ratio */
}

.single-slice .video-box video {
    width: 100%;
    display: block;
}

.theme-light .single-slice .video-box video.dark {
    display: none;
}
.theme-dark .single-slice .video-box video.light {
    display: none;
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    .single-slice {
        gap: var(--spacing-7);
    }

    .single-slice .text-pane .heading {
        hyphens: auto;
        hyphenate-limit-chars: 16 4 4;
    }
}

/* Breakpoints M and S */
@media screen and (min-width: 0px) and (max-width: 1080px) {
    .single-slice {
        padding: var(--spacing-12) var(--spacing-7);
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    .single-slice,
    .single-slice.reversed {
        gap: var(--spacing-9);
        flex-direction: column-reverse;
        align-items: stretch;
    }
}