/* All styles scoped under .master-students-container */
.master-students-container {
    /* Custom heights and widths (no direct Bootstrap equivalents) */
    .min-w-200 {
        min-width: 200px;
    }
    .h-539 {
        height: 539px;
    }
    .h-419 {
        height: 419px;
    }
    .h-479 {
        height: 479px;
    }
    .h-359 {
        height: 359px;
    }
    .h-519 {
        height: 519px;
    }
    .h-399 {
        height: 399px;
    }
    .max-w-300 {
        max-width: 300px;
    }
    /* Custom colors */
    .text-gtlab-primary {
        color: #303880;
    }
    .text-gtlab-dark {
        color: #0e144b;
    }
    /* Card background and image styles */
    .h-100 {
        border-radius: 80px 5px 5px 5px;
        transition: background-color 0.3s ease;
    }
    .h-100:hover {
        background-color: #FFF2E2;
    }
    .master-students-student-image {
        border-radius: 80px 5px 5px 5px;
        transition: border-radius 0.3s ease;
        object-fit: cover; /* Ensure no stretching */
        aspect-ratio: 4 / 3; /* Maintain consistent proportions */
    }
    .master-students-student-image:hover {
        border-radius: 5px;
    }
    /* Font family */
    .position-absolute,
    .fs-5,
    .display-5 {
        font-family: "Inter", sans-serif;
    }
    /* Custom pointer events (no Bootstrap equivalent) */
    .pointer-events-none {
        pointer-events: none;
    }
    /* Student text container */
    #studentsGrid .master-students-text {
        padding-top: 10px;
        padding-left: 10px;
    }
    #studentsGrid .master-students-text > .fw-medium {
        margin-bottom: 8px;
    }
    /* Arrow styling */
    .master-students-arrow {
        font-size: 18px;
        line-height: 1;
        transform: scaleX(1.2);
        margin-left: 4px;
        display: inline-block;
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .h-539 {
            height: 479px;
            max-width: 300px;
        }
        .h-419 {
            height: 359px;
        }
        .d-flex {
            gap: 0.625rem; /* Match original 10px */
        }
    }
    @media (min-width: 769px) and (max-width: 1440px) {
        .h-539 {
            height: 519px;
        }
        .h-419 {
            height: 399px;
        }
    }
}