/* Homepage "for students" card strip (below the hero slider): the 4 cards
   were flush against each other with zero gap/radius/shadow — looked like
   one smashed-together block. Add breathing room + framing, keep the
   existing legacy title/desc/arrow positioning untouched inside each card.

   Note: the actual flex item here is the wrapping <a> (no class, just
   inline styles), NOT .for-students__item (the inner div) — width/flex
   sizing must target `.for-students > a` or the percentage math double
   -applies against the wrong box. */

.for-students {
    gap: 16px;
    padding: 0 20px;
    background: #F5F5F5;
}
.for-students > a {
    display: block;
    width: calc(50% - 8px);
}
.for-students__item {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 20, 26, .12);
    transition: box-shadow .25s ease, transform .5s ease;
}
.for-students > a:hover .for-students__item {
    box-shadow: 0 14px 40px rgba(20, 20, 26, .2);
    transform: scale(1.02);
}
.for-students__item--link.position {
    transition: background .2s ease, color .2s ease;
}
.for-students > a:hover .for-students__item--link.position {
    background: var(--brand, #E32D44);
    border-color: var(--brand, #E32D44);
}

@media (max-width: 800px) {
    .for-students {
        gap: 14px;
        padding: 0 16px;
    }
    .for-students > a {
        width: 100%;
    }
    .for-students__item {
        border-radius: 16px;
    }
}