.at-bentoGrid__grid {
    display: grid;
    gap: clamp(15px, 1.5vw, 1.5rem);
    grid-template-columns: 1fr;
    width: 100%;
    max-width: var(--maxWidth);
    margin: 0 auto 1.5vw;
    color: inherit;
}

.at-bentoGrid__content h2,
.at-bentoGrid__content h3 {
    color: inherit
}

@media screen and (min-width: 520px) {
    .at-bentoGrid__grid {
        grid-auto-flow: dense;
        grid-template-columns: repeat(2, 1fr);
    }

    .at-bentoGrid--g3 .at-bentoGrid__col2 {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .at-bentoGrid__grid--img-S .at-bentoGrid__imgContainer {
        margin-block: auto 0;
    }
}

@media screen and (min-width: 1000px) {
    .at-bentoGrid__grid {
        grid-template-columns: repeat(7, 1fr);
    }

    /**
     * grid layout 1 & 2
     */
    .at-bentoGrid--g1 .at-bentoGrid__col1,
    .at-bentoGrid--g2 .at-bentoGrid__col1 {
        grid-column: 1 / 3;
        grid-row: 1 / 1;
    }

    .at-bentoGrid--g1 .at-bentoGrid__col2,
    .at-bentoGrid--g2 .at-bentoGrid__col2 {
        grid-column: 3 / 6;
        grid-row: 1 / 1;
    }

    .at-bentoGrid--g1 .at-bentoGrid__col3,
    .at-bentoGrid--g2 .at-bentoGrid__col3 {
        grid-column: 6 / 8;
        grid-row: 1 / 1;
    }

    .at-bentoGrid--g1 .at-bentoGrid__col4 {
        grid-column: 1 / 3;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g1 .at-bentoGrid__col5 {
        grid-column: 3 / 5;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g1 .at-bentoGrid__col6 {
        grid-column: 5 / 8;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g2 .at-bentoGrid__col4 {
        grid-column: 1 / 4;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g2 .at-bentoGrid__col5 {
        grid-column: 4 / 6;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g2 .at-bentoGrid__col6 {
        grid-column: 6 / 8;
        grid-row: 2 / 2;
    }

    /**
     * grid layout 3
     */
    .at-bentoGrid--g3 .at-bentoGrid__col1 {
        grid-column: 1 / 3;
        grid-row: 1 / 1;
    }

    .at-bentoGrid--g3 .at-bentoGrid__col2 {
        grid-column: 3 / 6;
        grid-row: 1 / 3;
    }

    .at-bentoGrid--g3 .at-bentoGrid__col3 {
        grid-column: 6 / 8;
        grid-row: 1 / 1;
    }

    .at-bentoGrid--g3 .at-bentoGrid__col4 {
        grid-column: 1 / 3;
        grid-row: 2 / 2;
    }

    .at-bentoGrid--g3 .at-bentoGrid__col5 {
        grid-column: 6 / 8;
        grid-row: 2 / 2;
    }
}

/**
 * Content
 */

.at-bentoGrid__col {
    position: relative;
    overflow: hidden;
    min-height: inherit;
    border: 1px solid var(--darker-100);
    border-radius: var(--radius-l);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--_textColor, inherit);
    background-color: var(--_backgroundColor, var(--white));
    --_padding: 1.25rem;

    &.--center {
        text-align: center;

        &:not(:has(.at-bentoGrid__imgContainer)) .at-bentoGrid__content {
            margin-block: auto;
        }
    }
}

.at-bentoGrid__content {
    position: relative;
    margin-block: 0 auto;
    padding: var(--_padding);
    z-index: 0;

    p:last-child {
        margin-bottom: 0;
    }

    .at-bentoGrid__col.--textTop & {
        order: -1;
    }
}

/**
 * Image
 */

.at-bentoGrid__imgContainer {
    position: relative;

    &.--overlay::after,
    &.--gradient::after {
        content: '';
        position: absolute;
        inset: -1px;
    }

    &.--overlay::after {
        background-color: var(--_backgroundColor);
        opacity: 0.5;
    }

    &.--gradient::after {
        background-color: transparent;
        background-image: linear-gradient(transparent, var(--_backgroundColor));
        opacity: 0.75;
    }

    .at-bentoGrid__col.--textTop &.--gradient::after {
        transform: scaleY(-1);
    }
}

.at-bentoGrid__img {
    position: relative;
    display: block;
    height: auto;
    width: min(6em, 33%);
    margin: var(--_padding) var(--_padding) 0;

    .at-bentoGrid__col.--center & {
        margin-inline: auto;
    }

    &[width='530'] {
        width: 65%;
    }

    /* Variants */

    .at-bentoGrid__grid--img-S & {
        width: 4em;
    }

    .at-bentoGrid__grid--img-M & {
        width: calc(50% + 2rem);
    }

    .at-bentoGrid__grid--img-M &,
    .at-bentoGrid__grid--img-L & {
        margin: var(--_padding);
        border-radius: var(--radius-s);
    }

    .at-bentoGrid__grid--img-L & {
        width: calc(100% - var(--_padding) * 2);
    }

    .at-bentoGrid__grid--img-W & {
        width: calc(100% - 2rem);
        margin-inline: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .at-bentoGrid__grid--img-F &,
    .at-bentoGrid__grid--img-W & {
        width: calc(100% + 2rem);
        margin: 0;
    }
}

/* Gradient for full width images */
.at-bentoGrid__grid--img-F,
.at-bentoGrid__grid--img-W {
    .at-bentoGrid__imgContainer::after {
        background-image: linear-gradient(transparent, transparent 55%, var(--_backgroundColor) 99%, var(--_backgroundColor));
        opacity: 1;
    }
}

/* Optimize content placement */
.at-bentoGrid__grid--img-M,
.at-bentoGrid__grid--img-L {
    .at-bentoGrid__imgContainer + .at-bentoGrid__content {
        padding-top: 0;
        padding-bottom: var(--_padding);
    }

    &.--textTop .at-bentoGrid__imgContainer + .at-bentoGrid__content {
        padding-top: var(--_padding);
        padding-bottom: 0;
    }
}

/* Full screen image */
.at-bentoGrid__grid--img-C {
    min-height: 95vw;

    .at-bentoGrid__imgContainer,
    .at-bentoGrid__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
    }

    .at-bentoGrid__content {
        margin-block: auto 0;
        z-index: 2;
    }

    .at-bentoGrid__imgContainer.--gradient::after {
        background-image: linear-gradient(transparent, transparent 40%, var(--_backgroundColor) 80%, var(--_backgroundColor));
    }

    &.--textTop {
        .at-bentoGrid__content {
            margin-block: 0 auto;
        }
    }

    @media screen and (min-width: 520px) {
        & {
            min-height: 50vw;
        }
    }

    @media screen and (min-width: 1000px) {
        & {
            min-height: 0;
        }
    }
}

/**
 * Link
 */

.at-bentoGrid__link {
    display: block;
    align-self: flex-end;
    width: 2em;
    aspect-ratio: 1;
    margin: -0.5rem .8rem .8rem;
    border-radius: 50%;
    text-indent: -999em;
    background: var(--indigo) url(/ui/procurios-2019/img/arrow-white-right.svg) no-repeat center / .8em;
    z-index: 3;
    opacity: .8;

    &.--video {
        background-image: url(/ui/procurios-2019/img/play-white.svg);
    }

    &:hover {
        opacity: 0.99;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
    }

    .at-bentoGrid__grid--img-C:not(:has(.at-bentoGrid__content)) & {
        position: absolute;
        bottom: 0;
    }

    .at-bentoGrid__grid--img-F.--textTop &,
    .at-bentoGrid__grid--img-W.--textTop & {
        margin-top: -2.8em;
    }
}

/**
 * When used in Diversify Article Template
 */
.at-diversify .at-bentoGrid__col {
    background-color: var(--_backgroundColor, var(--color100));
}

.at-diversify .at-bentoGrid__col:has(.at-bentoGrid__link):hover {
    color: var(--colorText);
    background-color: var(--_backgroundColor, var(--color));
}