.block-banner .image-col {
    align-content: center;
}

.block-banner .image-col img {
    max-height: 540px;
    margin-inline: auto;
}

@media screen and (min-width: 52em) {
    .block-banner {
        .image-col {
            align-content: end;
        }
        .image-col.block-end img {
            margin-bottom: calc(var(--gapy) * -2);
        }
    }
}

.block-banner.block-inner-fade-in .image-col img {
    translate: 0 50px;
    scale: .7;
    opacity: 0;
    transition: scale 0.9s cubic-bezier(0, 1, 0, 1) .4s, opacity 0.6s cubic-bezier(0, 1, 0, 1) .4s, translate 0.9s cubic-bezier(0, 1, 0, 1) .4s;
}

.block-banner .observed .image-col img {
    scale: 1.001;
    opacity: 1;
    translate: 0 0;
}

.block-banner.block-inner-fade-in .content-col h1 {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1), opacity 1.9s cubic-bezier(0, 1, 0, 1), translate 1.4s cubic-bezier(0, 1, 0, 1);
}

.block-banner.block-inner-fade-in .content-col p {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1) .5s, opacity 1.9s cubic-bezier(0, 1, 0, 1) .5s, translate 1.4s cubic-bezier(0, 1, 0, 1) .5s;
}

.block-banner.block-inner-fade-in .content-col .button {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1) .8s, opacity 1.9s cubic-bezier(0, 1, 0, 1) .8s, translate 1.4s cubic-bezier(0, 1, 0, 1) .8s;
}

.block-banner .observed .content-col h1,
.block-banner .observed .content-col .button,
.block-banner .observed .content-col p {
    scale: 1.001;
    opacity: 1;
    translate: 0 0;
}