/* =================================================================== SECTORS section css =================================================================== */
.sectors {
    & .sectors__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g30);
    }

    & .sectors__card {
        position: relative;
        border-radius: var(--r-lg);
        overflow: hidden;

        &::after { position: absolute; inset: 0; background: var(--card-shade); content: ''; pointer-events: none; }
        &:hover .sectors__img { transform: scale(1.05); }
    }

    & .sectors__img {
        width: 100%;
        aspect-ratio: 4 / 4.6;
        object-fit: cover;
        transition: var(--transition);
    }

    & .sectors__share .notch-badge {
        width: 50px; height: 50px;
        &:hover { background: var(--primary); color: var(--white); }
    }

    & .sectors__info {
        position: absolute; inset-inline: 0; bottom: 0;
        z-index: 1;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp10);
        padding: var(--sp30);
    }

    & .sectors__scope { color: var(--white-muted); }

    & .sectors__name {
        font-size: var(--f30);
        color: var(--white);
    }

    & .sectors__role { background: var(--white); }
}

/* =================================================================== SECTORS responsive =================================================================== */
@media (max-width: 991.98px) {
    .sectors {
        & .sectors__grid { grid-template-columns: 1fr 1fr; }
    }
}

@media (max-width: 767.98px) {
    .sectors {
        & .sectors__grid { grid-template-columns: 1fr; }
        & .sectors__img { aspect-ratio: 4 / 3.4; }
    }
}