﻿.block-container {
    color: var(--theme-page-fg);
    position: relative
}

@media screen and (max-width: 860px) {
    .block-container {
        margin:0
    }
}

.block-container__container {
    display: grid;
    margin: 0 auto;
    max-width: 1380px;
    /* padding: 0 min(5vw,40px); */
    padding: 0 40px;
    position: relative;
    width: 100%
}

@media screen and (max-width: 860px) {
    .block-container__container {
        padding-left:24px;
        padding-right: 24px
    }
}

.block-container__background {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto
}

.block-container__background--inner {
    border-radius: 1.25em;
    /* left: min(5vw,40px);
    right: min(5vw,40px) */
        left: 40px;;
    right: 40px;
}

@media screen and (max-width: 860px) {
    .block-container__background--inner {
        left:24px;
        right: 24px
    }
}

.block-container__content {
    position: relative
}

.block-container--has-inner-background>.block-container__container>.block-container__content {
    padding: 0 4em
}

@media screen and (max-width: 860px) {
    .block-container--has-inner-background>.block-container__container>.block-container__content {
        padding:0 2em
    }
}

.block-container__scroll-id {
    height: 1px;
    opacity: 0;
    position: absolute;
    top: -80px;
    width: 1px
}

.block-heading {
    display: flex;
    flex-direction: column;
    /* gap: 2.5em; */
    position: relative;
    z-index: 1
}
.block-heading__actions {
    margin-top: 32px;
}

.block-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5em
}

.block-side-by-side {
    grid-gap: 4em;
    gap: 4em;
    grid-template-areas: "media heading"
}

.block-side-by-side,.block-side-by-side--reversed {
    display: grid;
    grid-template-columns: minmax(0,5fr) minmax(0,5fr);
    grid-template-rows: auto
}

.block-side-by-side--reversed {
    grid-template-areas: "heading media"
}

@media screen and (max-width: 860px) {
    .block-side-by-side {
        grid-gap:2em;
        display: grid;
        gap: 2em;
        grid-template-areas: "media" "heading";
        grid-template-columns: 100%;
        grid-template-rows: auto auto
    }
}

.block-side-by-side__heading {
    align-self: center;
    grid-area: heading
}

.block-side-by-side__media {
    display: grid;
    grid-area: media;
    position: relative
}

.block-side-by-side__media>* {
    grid-area: 1/1
}

.block-side-by-side__media-aspect {
    overflow: hidden;
    pointer-events: none
}
