/* ---------------------------------------------------------------
   Light theme
   --------------------------------------------------------------- */

html[data-theme="light"] .about-lead {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(112, 64, 178, 0.10),
            transparent 72%
        ),
        var(--surface-raised);
}

html[data-theme="light"] .about-principle {
    background: var(--surface);
}


/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 1120px) {
    .about-principles {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .about-principle:last-child {
        grid-column: 1 / -1;

        min-height: 190px;
    }

    .about-principle h3 {
        min-height: auto;
    }
}

@media (max-width: 1040px) {
    .hero__polygon-network {
        inset:
            -18%
            -72%
            -18%
            -38%;

        width: 220%;
        height: 140%;
    }
}

@media (max-width: 800px) {
    #about .about-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    #about .about-heading {
        position: static;
    }

    .about-principles {
        grid-template-columns: 1fr;
    }

    .about-principle,
    .about-principle:last-child {
        grid-column: auto;

        min-height: auto;

        display: block;
    }

    .about-principle__mark {
        display: block;

        margin-bottom: 28px;
    }

    .about-principle h3 {
        min-height: 0;

        display: block;

        margin: 0 0 14px;
    }

    .about-summary {
        padding:
            24px
            0
            0;
    }
}

@media (max-width: 520px) {
    .about-lead {
        padding: 24px;
    }

    .about-principle {
        padding: 22px;
    }
}


/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero__polygon-network,
    .hero__polygon-node {
        animation: none;

        transform: none;
    }
}