.at-features {
    position: relative;
}

.at-features:not(.u-squircleBg) {
    border-radius: var(--radius-l);
    background-color: var(--cloudy);
}

.at-features--lines-2 {
    --_lines: 2;
}

.at-features--lines-3 {
    --_lines: 3;
}

.at-features--lines-4 {
    --_lines: 4;
}

.at-features__preTitle {
    margin-inline: auto;
}

[class*='at-features__shape'] {
    position: absolute;
    rotate: -10deg;
    opacity: .5;
}

.at-features__shape1 {
    top: 9em;
    left: -13em;
    rotate: -10deg;
    width: min(23em, 50vw);
    height: min(23em, 50vw);
}

.at-features__shape2 {
    right: 4em;
    bottom: 0;
    width: min(12em, 24vw);
    height: min(12em, 24vw);
}

.at-features:not(.u-squircleBg) .at-features__shape1 {
    clip-path: polygon(66% 0, 100% 0%, 100% 100%, 48% 100%);
}

.at-features:not(.u-squircleBg) .at-features__shape2 {
    bottom: -5em;
    clip-path: polygon(0 0, 100% 0, 100% 67%, 0 50%);
}

.at-features__intro {
    max-width: var(--maxText);
    padding: 1.8em;
    text-align: center;
}

.at-features__inner,
.at-features__button {
    margin-bottom: 2rem;
}

.at-features__panel {
    padding: 1.8rem;
    border: 1px solid var(--indigo-50);
    background-color: var(--white);
}

.at-features__panelNumber {
    position: absolute;
}

.at-features__panelNumber:has(+ .at-features__panelTitle) {
    font: var(--font-bold) var(--size-medium)/1.1 var(--fam-headings);
}

.at-features__panelNumber ~ .at-features__panelTitle,
.at-features__panelNumber ~ .at-features__panelContent {
    padding-left: 1.4rem;
}

.at-features__panel p:last-child,
.at-features__item:last-child {
    margin-bottom: 0;
}

@media (max-width: 719px) {
    .at-features {
        width: calc(100% + 20px);
        margin-left: -10px;
            overflow: hidden;
    }

    .at-features__item {
        position: relative;
        max-width: 100vw;
        padding-inline: 20px;/** using px to align with l-col content on page */
        padding-bottom: 8em;
    }

    .at-features__panel {
        position: absolute;
        inset: auto 20px 0;
        min-height: 8em;
        border-radius: 0 0 var(--radius-l) var(--radius-l);
    }

    .at-features__image img {
        display: block;
        border-radius: var(--radius-l) var(--radius-l) 0 0;
    }

    .at-features__plus {
        display: none;
    }
}

@media screen and (min-width: 720px) {
    .at-features__inner {
        position: relative;/** for positioning images */
        width: 100%;
        padding-left: 1.8em;
        transform: none !important;
    }

    .at-features__inner,
    .at-features__button {
        margin-bottom: 3.6rem;
    }

    .at-features__item {
        margin: 0 20px .5em;
    }

    .at-features__panel {
        position: relative;
        width: min(31em, 50vw);
        border-radius: var(--radius-l);
        transition: all 0s var(--qubicBezier-2);
    }

    .at-features__item:not(.at-features__item--active) .at-features__panel p::after {
        content: '';
        position: absolute;
        inset: auto 1em 1em;
        height: 7ex;
        background: linear-gradient(0deg, #fff 0%, transparent 100%);
    }

    .at-features__item:not(.at-features__item--active) .at-features__panel {
        cursor: pointer;
    }

    .at-features__panelTitle {
        position: relative;
        padding-right: 1.5em;
    }

    .at-features__panelNumber {
        margin-right: .5rem;
    }

    .at-features__panelNumber:has(+ h3) {
        font: var(--font-bold) var(--size-medium)/1.1 var(--fam-headings);
    }

    .at-features__panel p {
        display: -webkit-box;
        -webkit-line-clamp: var(--_lines);
        -webkit-box-orient: vertical;
        margin-bottom: 0;
        overflow: clip;
    }

    .at-features__plus {
        position: absolute;
        inset: 1.8em .5em auto auto;
        transform: translateX(0);
        width: .9em;
        opacity: .5;
        transition: opacity .2s, transform .3s;
    }

    .at-features__panelTitle .at-features__plus {
        inset: .1em 0 auto auto;
    }

    .at-features__item--active .at-features__plus {
        transform: translateX(100%);
        opacity: 0;
    }

    .at-features__imagePositioner,
    .at-features__image {
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .at-features__imagePositioner {
        right: 0;
        width: calc(100% - min(40em, 60vw));
        overflow: hidden;
        visibility: hidden;
    }

    .u-squircleBg .at-features__imagePositioner {
        right: -4em;
        width: calc(100% - min(33em, 52vw));
    }

    .at-features__item--active .at-features__imagePositioner {
        display: flex;
        background: var(--darker-50);
        border-radius: var(--radius-l) 0 0 var(--radius-l);
        visibility: visible;
        visibility: visible;
    }

    .u-squircleBg .at-features__imagePositioner {
        border-radius: var(--radius-l)
    }

    .at-features__image {
        left: 0;
        right: 0;
    }

    .at-features__image img {
        object-fit: cover;
        width:100%;
        height: 100%;
        max-width: unset !important;
        border-radius: var(--radius-l) 0 0 var(--radius-l);
    }

    .at-features__item--active .at-features__imagePositioner .at-features__image {
        animation: showHide 1s forwards;
    }

    .at-features__item--active .at-features__panel {
        transform: translateX(1.8rem);
        box-shadow: var(--shadow-m);
        transition: all .2s var(--qubicBezier-2);
    }

    .at-features__item--active .at-features__panel p {
        opacity: 1;
    }

    .at-features__item--active .at-features__panel {
        border-color: var(--color);
        color:  var(--colorText);
        background-color: var(--color);
    }

    .at-features__item--active .at-features__panelTitle {
        color: var(--colorText);
    }

    .u-squircleBg .at-features__item--active .at-features__panel {
        border-color: var(--darker-100);
    }

    @keyframes showHide {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 100%;
        }
    }
}

/**
  Colors
  */

.--u-papaya [class*='at-features__shape'] {
    color: var(--papaya-300);
}

.--u-sapphire [class*='at-features__shape'] {
    color: var(--sapphire-100);
}

.--u-sunflower [class*='at-features__shape'] {
    color: var(--sunflower);
}

.--u-tropical [class*='at-features__shape'] {
    color: var(--tropical);
}