/* ---------------------------------------------------------------
    LAYOUT
--------------------------------------------------------------- */

.container {
    max-width: var(--max-w-wide);
}

/* ---------------------------------------------------------------
    HERO
--------------------------------------------------------------- */

.hero--about {
    /*ackground: url(/katugahagalgerajamahaviharaya.lk/assets/images/primary.png);*/
    background-color: var(--color-primary);
}

.hero--about .hero__background {
    width: 40%;
    left: auto;
    right: 0;
    z-index: 0;
}

@media (max-width: 768px) {
    .hero--about .hero__background {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
    ABOUT
--------------------------------------------------------------- */

.card-vision {
    padding: var(--gap-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    border-left: 4px solid var(--color-primary);
    gap: var(--gap-md);
}

.card-vision.mission {
    border: 1px solid color-mix(in srgb, var(--color-secondary) 50%, transparent);
    border-left: 4px solid var(--color-secondary);
}