/* Main. */

.main {
    --color-text: var(--white);

    color: var(--color-text);
}

.main .container {
    position: relative;
}

.main-background {
    overflow: hidden;
    position: absolute;
    inset: 0 var(--container-padding);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.main-background:after {
    content: '';
    position: absolute;
    inset: 0;

    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75));
}

.main-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.main-content {
    position: relative;
    justify-content: flex-end;

    min-height: min(90dvh - var(--header), 800px);
    padding-block: var(--i3) var(--i1);
    padding-inline: var(--container-padding);
    z-index: 1;
}

.main-content .richText {
    max-width: 645px;
}

.main-button {
    flex-wrap: wrap;

    margin-top: calc(var(--i4) - var(--gap));
}

/* Main. */

@media only screen and (min-width: 1378px) {

    /* Main. */
    .main-background {
        inset: 0;
    }

    .main-content {
        padding-inline: 0;
    }

    /* Main. */

}

@media only screen and (max-width: 767px) {

    /* Main. */
    .main-content {
        align-items: center;

        padding-inline: 16px;
        text-align: center;
    }

    .main-button {
        justify-content: center;
        grid-gap: 8px;

        width: 100%;
    }

    /* Main. */

}