.at-mixedMedia__contentWrapper {
    align-items: center;
}

.at-mixedMedia__contentWrapper.--isTopAligned {
    align-items: flex-start;
}

.at-mixedMedia__contentWrapper.--isCenterAligned {
    align-items: center;
}

.at-mixedMedia__intro {
    max-width: 60ch;
}

.at-mixedMedia__intro ul {
    padding-left: 1rem;
}

.at-mixedMedia__button {
    display: inline-block;
    margin-block: var(--marginSmall) 0;
}

.at-mixedMedia__text,
.at-mixedMedia__images {
    width: 100%;
}

.at-mixedMedia__pretitle:has(+ .at-mixedMedia__intro),
.at-mixedMedia__title {
    margin-bottom: var(--marginSmall);
}

.at-mixedMedia__title {
    &.--green {
        color: var(--primaryColor500);
    }

    &.--blue {
        color: var(--secondaryColor500);
    }
}

/**
 * Images
 */

.at-mixedMedia__images {
    --_columnAmount: 1;
    display: grid;
    align-items: center;
    grid-template-columns: [image-start] repeat(9, 1fr) [image-end] repeat(var(--_columnAmount), 1fr);
    margin-top: var(--marginSmall);
}

.at-mixedMedia__images.--medium {
    --_columnAmount: 3;
}

.at-mixedMedia__images.--small {
    --_columnAmount: 6;
}

.at-mixedMedia__image {
    width: 100%;
    border-radius: var(--borderRadiusSmall);
}

.at-mixedMedia__image,
.at-mixedMedia__video {
    grid-column: image-start / image-end;
    grid-row: 1;
}

@media (max-width: 595px) {
    .at-mixedMedia__images {
        direction: ltr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .--hasTwoImages .at-mixedMedia__image.--2 {
            animation-timeline: view();
        }
    }
}

/**
 * Layout: image on the left
 */

@container (min-width: 668px) {
    .at-mixedMedia__contentWrapper.--image-left .at-mixedMedia__text {
        grid-column: 2;
        grid-row: 1;
    }
}

.at-mixedMedia__contentWrapper.--image-left .at-mixedMedia__images {
    direction: ltr;
}

/**
 * Media queries
 */

@container (min-width: 668px) {
    .at-mixedMedia__contentWrapper.--image-left .at-mixedMedia__text {
        padding-right: 0;
    }

    .at-mixedMedia__images {
        margin-top: 0;
    }
}

.at-mixedMedia__contentWrapper {
    grid-template-columns: 1fr !important;
}

@container (min-width: 668px) {
    .at-mixedMedia__contentWrapper {
        grid-template-columns: repeat(2, minmax(min(100%, 256px), 1fr)) !important;
    }

    .at-mixedMedia__images {
        direction: rtl;
    }
}