section {
    contain: layout;
    container-name: section;
    container-type: inline-size;
}

.indent {
    z-index: -1;
    contain: layout;
    container-name: indent;
    container-type: inline-size;
}
.indent_text {
    z-index: -1;
    contain: layout;
    container-name: indent_text;
    container-type: inline-size;
}
.indent_text {
    p, ul, ol, blockquote {
        padding-left: 15%;
    }
}
@container indent_text (width > calc(67vw - 2 * var(--paddingb))) {
    .indent_text {
        p, ul, ol, blockquote {
            padding-left: 0 !important;
        }
    }
}
.indent > div {
    width: 200%;
    position: relative;
}
.indent-left > div {
    margin-left: -100%;
}
.indent-right > div {
    margin-right: -100%;
}
@container indent (width > 50vw) {
    .indent > div {
        width: 100%;
    }
    .indent-left > div {
        margin-left: 0%;
    }
    .indent-right > div {
        margin-right: 0%;
    }
}

.imgbx {
    contain: layout;
    container-name: imagebox;
    container-type: inline-size;
}
@container imagebox (width > 34vw) {
    .bigimg {
        --posH: center;
        --posV: center;
        width: 100%;
        max-height: clamp(300px, 50vmax, 600px);
        object-position: var(--posH) var(--posV)
    }
    .bigimg.optop {
        --posV: top;
    }
    .bigimg.opbottom {
        --posV: bottom;
    }
    .bigimg.opv25 {
        --posV: 25%;
    }
    .bigimg.opv75 {
        --posV: 55%;
    }
    .bigimg.opleft {
        --posH: left;
    }
    .bigimg.opright {
        --posV: right;
    }
    .bigimg.oph25 {
        --posH: 25%;
    }
    .bigimg.oph75 {
        --posH: 55%;
    }
}
@supports (animation-timeline: view(block)){
    /* FX */
    .fx.clip {
        overflow: clip
    }
    .fx .fxtarget {
        animation-fill-mode: both;
        animation-duration: 1ms; /* Firefox requires this to apply the animation */
    }
    .fx .fxtarget.grow {
        animation-timeline: view(block 100% -100%);
        animation-timing-function: ease-in;
    }
    .fx .fxtarget.move {
        animation-timeline: view(block -100% -100%);
        animation-timing-function: ease-in-out;
    }
    .fx .fxtarget.opacity {
        animation-timeline: view(block -10% -15%);
        animation-timing-function: ease-in-out;
        animation-name: opacity;
    }
    .fx .fxtarget.opacity.reverse {
        animation-timeline: view(block -10% -15%);
        animation-timing-function: ease-in-out;
        animation-name: opacityreverse;
    }
    .fx .fxtarget.move.from-bottom {
        animation-name: move-from-bottom;
    }
    .fx .fxtarget.grow.from-right {
        animation-name: grow-from-right;
    }
    .fx .fxtarget.grow.from-left {
        animation-name: grow-from-left;
    }

    @keyframes move-from-bottom {
      0% {
        transform: translateY(50vh);
        transform-origin: center;
      }
      100% {
        transform: translateY(-50vh);
        transform-origin: center;
      }
    }
    @keyframes grow-from-right {
      0% {
        transform: scale(75%);
        transform-origin: center right;
      }
      100% {
        transform: scale(100%);
        transform-origin: center right;
      }
    }
    @keyframes grow-from-left {
      0% {
        transform: scale(75%);
        transform-origin: center left;
      }
      100% {
        transform: scale(100%);
        transform-origin: center left;
      }
    }
    @keyframes opacity {
      0% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      100% {
        opacity: 0
      }
    }
    @keyframes opacityreverse {
      0% {
        opacity: 1
      }
      50% {
        opacity: 0.5
      }
      100% {
        opacity: 1
      }
    }
}