/* =========================================================
   TABLET
   768px - 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* ================= NAVBAR ================= */

    .navbar {
        height: 72px;
    }

    .navbar-container {
        padding: 0 3%;
    }

    .brand {
        gap: 9px;
    }

    .logo-icon {
        width: 42px;
        height: 42px;
    }

    .brand-name {
        font-size: 22px;
    }

    .nav-links {
        gap: 24px;
        font-size: 14px;
    }

    .nav-links a {
        padding: 27px 0;
    }

    /* ================= HERO ================= */

    .resources-hero {
        padding: 50px 5% 45px;
    }

    .resources-hero-container {
        max-width: 900px;

        grid-template-columns:
            minmax(0, 1fr) minmax(280px, 0.9fr);

        gap: 25px;
    }

    .resources-hero h1 {
        font-size: clamp(40px, 4.8vw, 54px);

        line-height: 1.02;

        letter-spacing: -1.5px;
    }

    .resources-hero-content .hero-description {
        font-size: 14px;

        line-height: 1.55;
    }

    .hero-features {
        gap: 0;
    }

    .hero-feature {
        padding: 0 10px;
        gap: 7px;
    }

    .hero-feature-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 16px;
    }

    .hero-feature strong {
        font-size: 9px;
    }

    .hero-feature small {
        font-size: 7px;
    }

    .resources-hero-image {
        height: 260px;
    }


    /* ================= RESOURCE CARDS ================= */

    .resource-section {
        padding: 40px 5% 50px;
    }

    .resource-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .resource-card {
        min-height: 175px;

        padding: 20px;

        gap: 15px;
    }


    /* IMPORTANT:
       Use feature-icon, NOT resource-icon */

    .feature-icon {
        width: 70px;
        height: 70px;

        flex: 0 0 70px;

        border-radius: 16px;
    }

    .feature-icon img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .resource-content {
        flex: 1 1 auto;

        min-width: 0;
    }

    .resource-content h2 {
        font-size: 18px;

        margin-bottom: 7px;
    }

    .resource-content p {
        font-size: 12px;

        line-height: 1.5;

        margin-bottom: 13px;
    }

    .resource-btn,
    .special-btn {
        font-size: 11px;

        padding: 9px 13px;
    }

    .special-badge {
        font-size: 9px;
    }


    /* ================= UNIVERSITY ================= */

    .university-resources {
        padding-left: 4%;
        padding-right: 4%;

        padding-bottom: 50px;
    }

    .university-resource-container {
        padding: 30px 25px 27px;
    }

    .university-heading h2 {
        font-size: 25px;
    }

    .university-heading p {
        font-size: 13px;
    }

    .university-resource-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 12px;
    }

    .university-resource-card {
        min-height: 140px;

        padding: 15px;
    }

    .university-resource-logo {
        width: 48px;
        height: 48px;

        margin-bottom: 8px;
    }

    .university-resource-info h3 {
        font-size: 13px;
    }

    .university-resource-info p {
        font-size: 9px;
    }


    /* ================= FOOTER ================= */

    footer {
        padding: 0 5%;
    }

    .footer-container {
        width: 100%;

        grid-template-columns:
            minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

        gap: 30px;

        padding: 48px 0 20px;
    }

    .footer-logo img {
        width: 30px;
        height: 30px;
    }

    .footer-logo>span {
        font-size: 22px;
    }

    .footer-description {
        margin-top: 18px;

        font-size: 13px;
    }

    .footer-links h3,
    .footer-right h3 {
        font-size: 15px;

        margin: 3px 0 19px;
    }

    .footer-links a {
        font-size: 13px;

        margin-bottom: 11px;
    }

    .social {
        gap: 17px;
    }

    .insta-logo {
        width: 22px;
        height: 22px;
    }

    .telegram-logo,
    .email-logo {
        width: 25px;
        height: 25px;
    }

    .footer-bottom {
        min-height: 65px;
    }

    .copyright,
    .made-for-students {
        font-size: 12px;
    }

}