.board-of-directors {
    --board-divider-height: 7rem;

    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: calc(var(--board-divider-height) + 5rem) 0rem;
    color: var(--color-white);
    background-color: #21383A;
    scroll-margin-top: 140px;

    @media (min-width: 768px) {
        --board-divider-height: 12.5625rem;
    }

    &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        left: 0;
        height: var(--board-divider-height);
        background-image: url("data:image/svg+xml,%3Csvg width='2488' height='201' viewBox='0 0 2488 201' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1658.7 0.0100098H1250.65C1291.95 0.0100098 1333.26 8.54001 1373.55 25.57C1406.8 39.63 1433.34 55.82 1458.86 73.4C1508.29 107.49 1577.56 142.12 1658.7 142.52L1658.75 142.32C1745.38 145.82 1819.57 109.37 1871.75 73.42C1897.27 55.84 1923.79 39.63 1957.04 25.57C1997.32 8.52001 2038.61 0.0100098 2079.92 0.0100098H1658.7Z' fill='%23375E62'/%3E%3Cpath d='M2079.94 0.0100098C2121.24 0.0100098 2162.55 8.54001 2202.84 25.57C2236.09 39.63 2262.63 55.82 2288.15 73.4C2337.58 107.49 2406.85 142.12 2487.99 142.52V0.0100098H2079.94Z' fill='%23375E62'/%3E%3Cpath d='M0 142.32C86.65 145.83 160.86 109.37 213.05 73.42C238.57 55.84 265.09 39.63 298.34 25.57C338.62 8.52001 379.91 0.0100098 421.22 0.0100098H0V142.32Z' fill='%23375E62'/%3E%3Cpath d='M797.58 0.0100098H421.24C462.54 0.0100098 503.85 8.54001 544.14 25.57C577.39 39.63 603.93 55.82 629.45 73.4C678.88 107.49 748.15 142.12 829.29 142.52V141.77L829.41 142.31C916.06 145.82 990.27 109.36 1042.46 73.41C1067.98 55.83 1094.5 39.62 1127.75 25.56C1168.03 8.51 1209.32 0 1250.63 0H797.58V0.0100098Z' fill='%23375E62'/%3E%3Cpath d='M2288.15 73.3997C2262.63 55.8197 2236.08 39.6198 2202.84 25.5698C2162.55 8.53976 2121.25 0.00976562 2079.94 0.00976562H2079.92C2038.62 0.00976562 1997.32 8.52976 1957.04 25.5698C1923.79 39.6298 1897.27 55.8397 1871.75 73.4197C1819.55 109.37 1745.35 145.83 1658.7 142.32L1658.63 142.52C1577.52 142.11 1508.28 107.48 1458.87 73.4097C1433.35 55.8297 1406.8 39.6297 1373.56 25.5797C1333.27 8.54971 1291.97 0.0197144 1250.66 0.0197144H1250.64C1209.34 0.0197144 1168.04 8.53971 1127.76 25.5797C1094.51 39.6397 1067.99 55.8497 1042.47 73.4297C990.27 109.38 916.07 145.84 829.42 142.33V142.88L829.3 142.54C748.16 142.15 678.89 107.51 629.46 73.4197C603.94 55.8397 577.39 39.6397 544.15 25.5897C503.86 8.55972 462.56 0.0297241 421.25 0.0297241H421.23C379.93 0.0297241 338.63 8.54972 298.35 25.5897C265.1 39.6497 238.58 55.8598 213.06 73.4398C160.86 109.39 86.6598 145.85 0.00976562 142.34V200.03H2487.99V142.54C2406.85 142.15 2337.58 107.51 2288.15 73.4197V73.3997Z' fill='%2321383A'/%3E%3C/svg%3E");
        background-repeat: repeat-x;
        background-position: center top;
        background-size: auto var(--board-divider-height);
        pointer-events: none;
    }

    .wrapper {
        position: relative;
        z-index: 1;
        width: min(calc(100% - 2rem), 71.25rem);
        margin-inline: auto;

        h2 {
            width: 100%;
            margin: 0;
            color: var(--color-white);
            font-family: var(--font-switzer-extrabold);
            font-size: clamp(3rem, calc(2.6479rem + 1.5023vw), 4rem);
            line-height: 1;
            text-align: center;
        }

        .director-list {
            width: 100%;
            margin-top: 4rem;
            visibility: visible;

            .splide__track {
                overflow: hidden;
            }

            .directors {
                display: flex;
                width: 100%;
                margin: 0;
                padding: 0;
                list-style: none;

                .director {
                    flex: 0 0 100%;
                    min-width: 0;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    text-align: center;

                    @media (min-width: 768px) {
                        text-align: left;
                    }

                    h3 {
                        margin: 0;
                        color: #d4edb5;
                        font-family: var(--font-switzer-semibold);

                        line-height: 1.25;
                    }

                    h4 {
                        margin: 0.5rem 0 0;
                        color: rgb(255 252 244 / 90%);
                        font-family: var(--font-switzer-medium);
                        font-size: 1.125rem;
                        font-weight: 500;
                        line-height: 1.5rem;
                        opacity: 0.9;
                    }
                }
            }

            .splide__arrows {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                margin-top: 2rem;
                justify-content: space-between;

                @media (min-width: 768px) {
                    justify-content: left;
                }

                .splide__arrow {
                    display: grid;
                    flex: 0 0 2.5rem;
                    width: 2.5rem;
                    height: 2.5rem;
                    margin: 0;
                    padding: 0;
                    appearance: none;
                    place-items: center;
                    color: inherit;
                    background: transparent;
                    border: 0;
                    border-radius: 0;
                    cursor: pointer;
                    opacity: 1;
                    transition: opacity 0.2s ease;

                    svg {
                        display: block;
                        width: 2.5rem;
                        height: 2.5rem;
                    }

                    &.splide__arrow--prev {
                        svg {
                            transform: rotate(180deg);
                        }
                    }

                    &:disabled {
                        cursor: default;
                        opacity: 0.35;
                    }

                    &:focus-visible {
                        outline: 2px solid var(--color-white);
                        outline-offset: 0.25rem;
                    }
                }
            }

            &:not(.is-initialized) {
                .splide__arrows {
                    display: none;
                }
            }
        }

        .board-of-directors__empty {
            margin: 4rem 0 0;
            text-align: center;
        }
    }

    @media (min-width: 768px) {

        .wrapper {
            width: min(calc(100% - 4rem), 71.25rem);

            .director-list {
                .splide__track {
                    overflow: visible;
                }

                .directors {
                    display: grid !important;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    column-gap: 1.875rem;
                    row-gap: 3rem;
                    transform: none !important;

                    .director {
                        width: auto !important;
                    }
                }

                .splide__arrows {
                    display: none;
                }
            }
        }
    }

    @media (min-width: 992px) {
        padding-bottom: 0;

        .wrapper {
            .director-list {
                .directors {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
            }
        }
    }
}