.leaders {
    --grid-column-count: 2;

    .leader-card {
        overflow: hidden;
        box-shadow: 3px 3px 8px -6px var(--color-dark40);
        margin-bottom: 20px;
        perspective: 1000px;
        width: fit-content;

        .leader-image {
            height: 300px;
            max-width: 300px;
            overflow: hidden;

            img {
                min-width: 100%;
                min-height: 100%;
            }
        }

        .leader-text {
            padding: 20px;
            background-color: #fff;

            div:first-of-type p {
                margin-bottom: 9px;
                font-size: 1rem !important;
                font-weight: 800;
            }

            div:last-of-type p {
                font-size: 0.8rem !important;
                padding: 0;
            }
        }

        .leader-overlay, .leader-trigger {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            transition: .5s ease;
            background-color: var(--color-light50);
            padding: 10px;
            color: white;
            overflow-y: hidden;
        }

        .leader-overlay {
            z-index: 15;

            p {
                margin: 10px;
                font-size: 0.8em;
            }
        }

        .leader-trigger {
            z-index: 20;
        }

        .leader-trigger-input {
            display: none;
        }

        .leader-trigger-input:checked ~ .leader-overlay {
            opacity: 1;
        }
    }
}

@media (width >= 1340px) {
    .leaders {
        --grid-column-count: 2;
    }
}

@media (1340px > width >= 1077px) {
    .leaders {
        --grid-column-count: 3;
    }
}

@media (1077px > width) {
    .leaders {
        --grid-column-count: 1;
    }
}

@media (1077px > width >= 615px) or (width >= 1340px) {
    .leaders {
        .leader-card {
            display: grid;
            grid-template-columns: 300px 1fr;
            grid-gap: 0;
            max-height: 400px;

            .leader-overlay {
                position: relative;
                opacity: 1;

                p {
                    margin: 5px;
                    font-size: 0.7em;
                }
            }
        }
    }
}