/* === LAYOUT === */

/* --- CURSOR 3D --- */
@media (hover: hover) and (min-width: 769px) {
    #cursor3d {
        position: fixed;
        top: 0;
        left: 0;
        width: 120px;
        height: 120px;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transform: translate(calc(var(--mx, -100px) - 60px), calc(var(--my, -100px) - 60px));
    }
}
@media not all and (hover: hover), (max-width: 768px) {
    #cursor3d { display: none; }
}

/* --- LAYOUT --- */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

section {
    border-bottom: 1px solid var(--line);
    padding: 80px 0;
}

section:last-of-type {
    border-bottom: none;
}

/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .page {
        padding: 0 32px;
    }

    section {
        padding: 60px 0;
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .page {
        padding: 0 20px;
    }

    section {
        padding: 48px 0;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .page {
        padding: 0 16px;
    }
}