/* Slides 3 columns */

.slides {
    padding-block: 8rem;
}
.slides.-accent {
    background-color: var(--main-col2);
}

.slides .-main-box {
    display: grid;
    gap: 3.2rem;
}

.slides p.text {
    margin-inline: auto;
    max-width: 80ch;

    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.625;
    text-align: center;
    color: var(--font-col-400);
}
.slides p.text.-wide {
    max-width: 85ch;
}

:where(.slides) ul {
    --size: minmax(38rem, 1fr);
    list-style: none;

    display: grid;
    grid-template-columns: repeat(auto-fit, var(--size));
    gap: 3.2rem;
}
:where(.slides) ul.-x2 {
    --size: minmax(43rem, 1fr);
}
:where(.slides) ul.-x4 {
    --size: minmax(23rem, 1fr);
}
:where(.slides) ul.-x5 {
    --size: minmax(20rem, 1fr);
}
:where(.slides) ul > li {
    padding: 2.4rem;

    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 1.6rem;

    background-color: var(--main-col2);
    background: linear-gradient(
        135deg,
        var(--main-col2) 60%,
        color-mix(
            in oklch,
            var(--main-col2) 50%,
            var(--border-col)
        ) 80%,
        var(--border-col) 100%
    );

    border: 1px solid var(--border-col);
    border-radius: 1.6rem;

    &.-span5 {
        grid-row: span 5;
    }
    &.-span4 {
        grid-row: span 4;
    }
    &.-span3 {
        grid-row: span 3;
    }
    &.-span2 {
        grid-row: span 2;
    }
    &.-span1 {
        grid-row: span 1;
        border-radius: 6px;
    }
}
.slides.-accent ul > li {
    background-color: var(--main-col1);
    background: linear-gradient(
        135deg,
        var(--main-col1) 60%,
        color-mix(
            in oklch,
            var(--main-col1) 50%,
            var(--main-col2)
        ) 80%,
        var(--main-col2) 100%
    );
}

/* Inline option */
.slides ul.-inline > li {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto;
    & svg {
        color: var(--yellow);
    }
}

.slides ul li .strong-ico {
    width: 4.8rem;
    & svg {
        --d: 24px;
    }
}
.slides ul li h3 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--font-col-600);
}
.slides ul li h3.-yellow {
    color: var(--yellow);
}
.slides ul li p {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--font-col-600);
    text-align: center;
}
.slides ul li .normal {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.625;
    color: var(--font-col-400);
    text-align: left;
}
.slides ul li .-smaller {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--font-col-300);
}
.slides ul li span {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.625;
    color: var(--font-col-300);
}

/* Center all in <li> */
.slides ul > li.-center > * {
    margin-inline: auto;
    text-align: center;
    text-wrap: pretty;
}