﻿.at-imageAndText.--light .articleTitle,
.at-imageAndText.--light * {
    color: var(--baseLight100);
}

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

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

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

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

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

.at-imageAndText__highlight {
    display: flex;
    margin-bottom: calc(var(--marginExtraSmall) / 4);
}

.at-imageAndText__text,
.at-imageAndText__images {
    width: 100%;
}

.at-imageAndText__pretitle:has(+ .at-imageAndText__intro),
.at-imageAndText__title {
    margin-bottom: var(--marginSmall);
}

/**
 * Images
 */

.at-imageAndText__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-imageAndText__images.--medium {
    --_columnAmount: 3;
}

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

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

.at-imageAndText__image.--1 {
    grid-column: image-start / image-end;
    grid-row: 1;
}

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

.at-imageAndText__image.--hasBoxShadow {
    box-shadow: var(--boxShadowHover);
}

/**
 * Has two images
 * Default position for second image: left center
 */

.at-imageAndText__images.--hasTwoImages {
    grid-template-columns: [image-start] repeat(9, 1fr) [image-end] repeat(var(--_columnAmount), 1fr);
    direction: rtl;
}

.at-imageAndText__images.--hasTwoImages .at-imageAndText__image.--2 {
    grid-column: 7 / -1;
    grid-row: 1;
    z-index: 10;
}

@media (min-width: 568px) {
    .at-imageAndText__images.--hasTwoImages .at-imageAndText__image.--2 {
        grid-column: 7 / 12;
    }
}

/** Vertical alignment */
.--isTopAligned .at-imageAndText__image.--2 {
    align-self: flex-start;
}

.--isBottomAligned .at-imageAndText__image.--2 {
    align-self: flex-end;
}

/** Horizontal alignment */
.at-imageAndText__images.--hasTwoImages.--isRightAligned {
    direction: ltr;
}

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

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

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

.at-imageAndText__contentWrapper.--image-left .at-imageAndText__images {
    direction: ltr;
}

/**
 * Media queries
 */

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

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

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

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

    .at-imageAndText__images {
        direction: rtl;
    }
}
