/* ---------- LAYOUT ---------- */
main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 72px;
}

section {
    margin-bottom: 108px;
}

.icon-only-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    color: rgba(245, 247, 255, 0.85);
    cursor: pointer;
}

    .icon-only-btn:hover {
        color: rgba(245, 247, 255, 1);
    }

    .icon-only-btn:focus-visible {
        outline: 2px solid rgba(140, 93, 242, 0.9);
        outline-offset: 4px;
    }

    .icon-only-btn .icon {
        font-size: 1.6rem;
        line-height: 1;
        display: block;
    }

.offcanvas-dark {
    background: var(--bg);
    color: rgba(245, 247, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

    .offcanvas-dark .offcanvas-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .offcanvas-dark .btn-close {
        filter: invert(1) grayscale(1);
    }

@media (max-width: 768px) {
    main {
        padding-inline: 16px;
    }
}