.poles-wrapper {
    position: relative;
    gap: 2em 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    filter: drop-shadow(2px 4px 6px hsl(from black h s l/0.1));
    & .pole-content {
        position: relative;
        display: flex;
        row-gap: min(2em, 4vw);
        flex-direction: column;
        padding: min(2.5em,5vw);
        background-color: #ffff;
        justify-content: space-between;
        flex: 1 1 max(min(200px, 80vw), 30%);
        &:nth-child(1) {
            --th: #4dbdc6;
            clip-path: polygon(0 0, calc(100% - min(2em,5vw)) 0, 100% 100%, 0% 100%);
        }
        &:nth-child(2) {
            --th: #1e8839;
            flex: 0 0 auto;
            clip-path: polygon(0 0, calc(100% - min(2em,5vw)) 0, 100% 100%, min(2em,5vw) 100%);
            /* clip-path: polygon(min(2em,5vw) 0%, 100% 0%, calc(100% - min(2em,5vw)) 100%, 0% 100%); */
        }
        &:nth-child(3) {
            --th: #c7cd00;
            clip-path: polygon(0 0, 100% 0, 100% 100%, min(2em,5vw) 100%);
        }
        & .title {
            font-weight: 700;
            color: var(--th);
            font-size: min(35px, 8vw);
            font-family: 'Amino', sans-serif;
        }
        & .pole-cards {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: min(1em, 2vw);
            & li {
                position: relative;
                max-width: min(150px,100%);
                flex: 1 1 max(min(60px, 30vw), 20%);
                & .overlay {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                }
                & .body {
                    height: 100%;
                    row-gap: .5em;
                    display: flex;
                    text-align: center;
                    align-items: center;
                    flex-direction: column;
                    & .title-card{
                        font-size: 17px;
                        color: var(--th);
                        font-weight: 700;
                        text-transform: uppercase;
                        & + p:not([class]) {
                            fosnt-size: min(14px, 3.4vw);
                        }
                    }
                    & [style^="--icn:"] {
                        position: relative;
                        display: block;
                        aspect-ratio: 1/1;
                        width: min(2em,5vw);
                        margin-block: auto .7em;
                        background-color: currentColor;
                        mask: var(--icn) center/ contain no-repeat;
                    }
                    & .plus {
                        position: relative;
                        margin-top: 0 !important;
                        background-color: var(--th) !important;
                        &::before {
                            position: absolute;
                            inset: 0;
                            content: '';
                            transition: all .3s;
                            background-color: #fff !important;
                        }
                        &:is(li:hover &)::before {background-color: hsl(from #fff h s l/.7) !important;}
                        &::after {
                            position: absolute;
                            content: '';
                            inset: 0;
                            transition: all .3s;
                            background-color: var(--th);
                            mask: url(../images/plus.svg) center/30% no-repeat;
                        }
                        &:is(li:hover &)::after {rotate: -180deg;}
                    }
                }
            }
        }
    }
}