/* Leader. */

.leader {
    --color-text: var(--black);

    position: relative;

    color: var(--color-text);
    padding-block: var(--section-gap);
    background-color: var(--white);
}

.leader + section {
    padding-top: var(--section-gap);
}

.leader-dec {
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: .5;
}

.leader.container {
    position: relative;
    z-index: 1;
}

.leader_head {
    display: flex;
    flex-direction: column;
    grid-gap: var(--i4);

    text-align: center;
}

.leader-text:not(:first-child),
.leader-content:not(:first-child) {
    margin-top: var(--i2);
}

.leader-content {
    position: relative;

    max-width: clamp(416px, 41vw, 733px);
    margin-inline: auto;
}

.leader-image img {
    margin-bottom: calc((14% + var(--section-gap)) * -1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.leader-content-before {
    display: flex;
    align-items: flex-end;
    top: 7%;
    left: max(clamp(300px, 21vw, 377px) * -1, -20vw);

    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(50px);
}

.leader-content-after {
    top: 33%;
    right: max(clamp(300px, 21vw, 377px) * -1, -20vw);

    background-color: var(--main);
}

.leader-content-before,
.leader-content-after {
    --color-text: var(--white);
    position: absolute;

    width: clamp(304px, 25vw, 453px);
    aspect-ratio: 448/360;
    padding: clamp(32px, 2.66vw, 56px);
    font-weight: 300;
    color: var(--color-text);
    z-index: 1;
}

.leader-point {
    display: flex;
    align-items: center;
    grid-gap: var(--i4);

    text-transform: uppercase;
}

.leader-point img {
    --size: 132px;

    pointer-events: none;
    flex-shrink: 0;

    width: var(--size);
    margin: calc(var(--size) * -.2575);
}

/* Leader. */

@media only screen and (min-width: 1200px) {
    .leader-point {
        grid-column: 3/4;
    }
}

@media only screen and (max-width: 767px) {
    .leader-content-before {
        background-color: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .2);
        backdrop-filter: blur(50px);
    }

    .leader-content-after {
        background-color: var(--main);
    }
}

@media only screen and (max-width: 767px) {
    .leader-content {
        display: flex;
        flex-direction: column;
    }

    .leader-content-before,
    .leader-content-after {
        position: relative;
        left: auto;
        right: auto;

        margin-inline: auto;
        width: 100%;
        max-width: 300px;
    }

    .leader-content-before {
        background-color: var(--main);
    }

    .leader-content-after {
        background-color: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .2);
        backdrop-filter: blur(50px);
    }

    .leader-image img {
        margin-top: -32px;
        margin-bottom: -40px;
    }
}