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

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

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

.at-imageAndText__title {
    margin-bottom: var(--marginExtraSmallMedium);
}

.at-imageAndText__pretitle {
    display: inline-block;
    margin-bottom: .25rem;
}

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

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

/**
 * 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 {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    border-radius: var(--borderRadiusMedium);
}

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

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

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

@container (min-width: 668px) {
    .at-imageAndText__contentWrapper.--image-left .at-imageAndText__textWrapper {
        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__textWrapper {
        padding-right: 0;
    }

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

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

.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;
    }
}