:root {
    --pico-typography-spacing-vertical: 1rem;
}



p {
    max-width: 40rem;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;

    @media screen and (min-width: 600px) {
        grid-template-columns: 1fr 1fr;

    }

    gap: 20px;
}

h1,
h2,
h3 {
    font-weight: normal;
}

section {
    padding-top: 4rem;
    padding-bottom: 6rem;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}


.decomation {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin-top: 3vw;
    margin-bottom: 5vw;
}


.decomation {
    cursor: crosshair;
    display: inline-block;
    aspect-ratio: 2/1;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    position: relative;
}

@media screen and (min-width: 600px) {
    section>*:not(h1):not(h2) {
        margin-left: 5vw;
    }

    h2 {
        margin-bottom: 4rem;
        max-width: 30rem;
        text-wrap: balance;
    }

    h3 {
        margin-bottom: 1.5rem;
        max-width: 30rem;
        margin-top: 5rem;
        text-wrap: balance;
    }
}

footer {
    margin-top: 4rem;

    .copyright {
        margin-top: 4rem;
    }
}

p,
td {
    hyphens: auto;
}



h2 {
    transform: perspective(1000px) rotateY(90deg);
    color: var(--km-pink);
}

.main-header {
    display: flex;

    align-items: center;
    height: 100vh;


    h1 {
        font-size: clamp(2.5rem, 6vw, 10rem);
        margin-top: -4vw;
    }
}

.hero{
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}