section.text-and-image {
    padding: 0 var(--padding);
    height: 200vh;
}

section.text-and-image .content {
    padding: var(--xLargeTopPadding, 20vh) 0 var(--largeTopPadding, 15vh);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: padding 1s ease;
}

@media (min-width: 769px) {
    section.text-and-image .flexbox {
        flex-wrap: nowrap;
    }
}

section.text-and-image .flexbox>.lg_4 {
    align-self: stretch;
    max-height: 100%;
}

section.text-and-image .change_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

section.text-and-image .change_grid > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition: all .5s ease;
}

section.text-and-image .change_grid > .hidden {
    opacity: 0;
    pointer-events: none;
}

section.text-and-image.step_2 .content {
    padding-top: var(--largeTopPadding, 15vh);
}

section.text-and-image.step_2 .flexbox {
    --gap: 2rem;
    transition: all 1s ease;
}

section.text-and-image .flexbox>* {
    transition: all 1s ease;

}

@media screen and (min-width: 769px) {
    section.text-and-image.step_2 .flexbox>.lg_4 {
        width: calc(45% - var(--gap) / 2);
    }

    section.text-and-image.step_2 .flexbox>.lg_8 {
        width: calc(55% - var(--gap) / 2);
    }
}

section.text-and-image .image-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
    /* max-height: 80vh; */
    border-radius: var(--border-radius);
    width: 100%;
}

section.text-and-image .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

section.text-and-image .image-wrapper .desc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

section.text-and-image .headline {
    text-align: center;
    margin-bottom: var(--smallTopPadding, 5vh);
}

section.text-and-image span.desc {
    text-align: center;
    padding: 2rem var(--font-headline);
    border-bottom-right-radius: var(--border-radius);
    background-color: var(--bg);
    width: fit-content;
}

section.text-and-image .flexbox>.lg_8 {
    display: grid;
}

section.text-and-image .flexbox>.lg_8>* {
    grid-column-start: 1;
    grid-row-start: 1;
}

.text-and-image .hidden {
    opacity: 0;
    pointer-events: none;
    /* display: none; */
}

.text-and-image {
    height: 300vh;
    /* background-color: var(--bg); */
}

.text-and-image .flexbox {
    margin: auto;
    flex-shrink: 1;
    min-height: 50vh;
    flex-grow: 1;
    align-items: stretch;
    width: 100%;
}

section.text-and-image .image-wrapper {
    max-height: 100%;
    transition: all 1s ease;
}

section.text-and-image .hidden .image-wrapper {
    transform: translateX(100vw) rotate(10deg);
}

section.text-and-image .hidden .image-wrapper:nth-child(even) {
    transform: translateX(100vw) rotate(-10deg);
}

section.text-and-image .gallery-images {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-height: 100%;

    display: grid;
    grid-template-rows: 3fr 2fr;
}

section.text-and-image .lg_8 .image-wrapper:nth-child(1) {
    /* height: calc(100% / 3 * 2); */
    max-height: unset;
}

section.text-and-image .lg_8 .image-wrapper:nth-child(2) {
    /* height: calc(100% / 3 * 1); */
    max-height: unset;
}

section.text-and-image .image-wrapper.overlay img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

section.text-and-image .image-wrapper.overlay {
    background-color: var(--primary);
}

@media screen and (max-width: 768px) {

    section.text-and-image .content {
        height: auto;
    }

    section.text-and-image,
    section.text-and-image .image-wrapper img {
        height: auto;
        position: static;
    }

    section.text-and-image .image-wrapper {
        max-height: none;
        height: auto;
    }

    section.text-and-image .gallery-images {
        grid-template-rows: auto auto;
    }

    section.text-and-image .image-wrapper img {
        max-height: 35vh;
    }
}

section.text-and-image .animate-top,
section.text-and-image .animate-bottom,
section.text-and-image .animate-left,
section.text-and-image .animate-right {
    transition: opacity 1s ease;
    transition-delay: 1s;
}

section.text-and-image.start .headline,
section.text-and-image.start .animate-bottom,
section.text-and-image.start .animate-left,
section.text-and-image.start .animate-right {
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode: both;
    transition: opacity 1s ease;
    transition-delay: 1s;
}

section.text-and-image:not(.start) .headline,
section.text-and-image:not(.start) .animate-bottom,
section.text-and-image:not(.start) .animate-left,
section.text-and-image:not(.start) .animate-right {
    animation: none;
    opacity: 0 !important;
}