/**
 * Columns
 */

.at-columns__column {
    --_bgColor: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: .7rem;
    background-color: var(--_bgColor);
}

.at-columns__column.--border {
    border: 1px solid #dbd5d7;
}

.--yellow {
    --_bgColor: #d6d400;
}

.--blue {
    --_bgColor: #73aea2;
}

.--darkgreen {
    --_bgColor: #234441;
}

.at-columns__textContainer {
    padding: 2rem;
}

.at-columns__title {
    margin: 0;
    font-size: 1.4rem;
}

.at-columns__title + .at-columns__text {
    margin-top: 1rem;
}

.at-columns__textContainer .at-columns__title,
.at-columns__textContainer .at-columns__text p {
    color: #000;
}

.--darkgreen .at-columns__title,
.--darkgreen .at-columns__text p {
    color: #fff;
}

.at-columns__text a {
    position: relative;
    z-index: +1;
}

.at-columns__imageContainer {
    order: -1;
    overflow: clip;
    border-top-right-radius: .7rem;
    border-top-left-radius: .7rem;
}

.at-columns__image {
    display: block;
    width: 100%;
}

.at-columns__column.--hasLink {
    position: relative;
}

.at-columns__column.--hasLink:hover {
    opacity: .9;
}

.at-columns__link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/**
 * Only image container, without text
 */

.at-columns__imageContainer:only-child {
    height: 100%;
}

.at-columns__imageContainer:only-child .at-columns__image {
    height: 100%;
    object-fit: cover;
}

.at-columns__column .ctaButton:hover {
    transform: unset;
}

@media (min-width: 768px) {
    .at-columns__imageContainer {
        margin-block: 0;
    }
}

/**
 * Grid
 */

.g-gridContainer {
    container-type: inline-size;
}

.g-gridContainer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 256px), 1fr));
    grid-gap: 2rem;
}

/** 2 columns */
@container (min-width: calc(256px * 2 + 2rem)) {
    .g-gridContainer__inner.--2col {
        grid-template-columns: repeat(2, minmax(min(100%, 256px), 1fr));
    }
}

/** 3 columns */
@container (min-width: calc(256px * 2 + 2rem)) {
    .g-gridContainer__inner.--3col {
        grid-template-columns: repeat(2, minmax(min(100%, 256px), 1fr));
    }
}

@container (min-width: calc((256px * 3) + (2rem * 2))) {
    .g-gridContainer__inner.--3col {
        grid-template-columns: repeat(3, minmax(min(100%, 256px), 1fr));
    }
}

/** 4 columns */
@container (min-width: calc((256px * 2) + (2rem * 2))) {
    .g-gridContainer__inner.--4col {
        grid-template-columns: repeat(2, minmax(min(100%, 256px), 1fr));
    }
}

@container (min-width: calc(256px * 4 + 3 * 2rem)) {
    .g-gridContainer__inner.--4col {
        grid-template-columns: repeat(4, minmax(min(100%, 256px), 1fr));
    }
}