.trees-separador {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.trees-separador--izquierdo { grid-template-columns: auto 1fr; }
.trees-separador--derecho { grid-template-columns: 1fr auto; }

.trees-separador::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
}

.trees-separador--izquierdo::before { left: 100%; }
.trees-separador--derecho::before { right: 100%; }

.trees-separador__franja {
    grid-row: 1;
}

.trees-separador--izquierdo .trees-separador__franja {
    grid-column: 2 / 3;
    margin-left: -30px;
    clip-path: polygon(
        101% 0,
        0 clamp(15%, 4vw, 30%),
        0 calc(100% - clamp(15%, 4vw, 25%)),
        101% 100%
    );
}

.trees-separador--derecho .trees-separador__franja {
    grid-column: 1 / 2;
    margin-right: -35px;
    clip-path: polygon(
        -1px 0,
        100% clamp(15%, 4vw, 30%),
        100% calc(100% - clamp(15%, 4vw, 25%)),
        -1px 100%
    );
}

.trees-separador__triangulos {
    grid-row: 1;
    z-index: 1;
    height: 100%;
}

.trees-separador--izquierdo .trees-separador__triangulos {
    grid-column: 1 / 2;
    padding-left: 20px;
}

.trees-separador--derecho .trees-separador__triangulos {
    grid-column: 2 / 3;
    padding-right: 20px;
}

.trees-separador__texto {
    grid-column: 1 / 3;
    grid-row: 1;
    z-index: 1;
    margin: auto;
    padding: 50px 20px;
    font-family: 'Moranga', serif;
    font-size: var(--fs-900);
    font-weight: 300;
    text-align: center;
}

.trees-separador__texto svg {
    margin-bottom: -2px;
    width: clamp(95px, 20vw, 120px);
}

@media (max-width: 1000px) {
    .trees-separador__franja {
        grid-column: 1 / 3;
    }

    .trees-separador__triangulos {
        display: none;
    }
}