/* =====================================================
   ENKLEANA AESTHETICS — LASER PAGE
===================================================== */

.laser-hero__media {
    --zoom: 1.1;
}

.laser-hero__media img {
    object-position: 50% 40%;
}


/* =====================================================
   EDITORIAL — dominant portrait + detail with copy
===================================================== */

.laser-editorial {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
}

.laser-editorial__main {
    grid-column: 1 / span 6;
    aspect-ratio: var(--ratio-portrait);
}

.laser-editorial__main img {
    object-position: 50% 60%;
}

.laser-editorial__side {
    grid-column: 8 / span 5;
}

.laser-editorial__detail {
    width: 78%;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-l);
}

.laser-editorial__detail img {
    object-position: 35% 45%;
}

.laser-editorial__copy h2 {
    max-width: 10ch;
}

.laser-editorial__copy p {
    max-width: 26rem;
    margin-top: var(--space-s);

    color: var(--c-muted);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .laser-editorial__main {
        grid-column: 1 / span 7;
    }

    .laser-editorial__side {
        grid-column: 8 / -1;
    }

    .laser-editorial__detail {
        width: 100%;
    }
}

@media (max-width: 760px) {

    .laser-editorial__main {
        grid-column: 1 / -1;
        margin-inline: calc(var(--edge) * -1);
    }

    .laser-editorial__side {
        grid-column: 1 / -1;
        margin-top: calc(var(--space-l) * -1);
        position: relative;
    }

    .laser-editorial__detail {
        width: 58%;
        margin-left: auto;
        margin-bottom: var(--space-m);
        outline: 6px solid var(--c-cream);
    }
}