/* =================================================================== PROJECTS section css =================================================================== */
.projects {
    & .projects__card {
        position: relative;
        &:hover .projects__img { transform: scale(1.05); }
        &:hover .projects__title { color: var(--primary); }
        &:hover .projects__arrow .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .projects__media {
        position: relative;
        margin-bottom: var(--sp20);
        border-radius: var(--r-lg);
        overflow: hidden;
    }

    & .projects__img {
        width: 100%;
        aspect-ratio: 5 / 6;
        object-fit: cover;
        transition: var(--transition);
    }

    & .projects__category {
        display: block;
        margin-bottom: var(--sp5);
        font-size: var(--f14);
        color: var(--primary);
    }

    & .projects__title {
        font-size: var(--f25);
        transition: var(--transition);
    }

    & .projects__arrow .notch-badge { width: 55px; height: 55px; }

    & .projects__icon .notch-badge { width: 50px; height: 50px; color: var(--primary); }

    & .projects__scope { margin-top: var(--sp5); font-size: var(--f14); }
}

/* =================================================================== PROJECTS responsive =================================================================== */
@media (max-width: 1199.98px) {
    .projects {
        }
}

@media (max-width: 767.98px) {
    .projects {
        }
}

@media (max-width: 575.98px) {
    .projects {
        }
}