.home-intro {
    grid-template-rows: 1fr auto;
}

.home-intro::before {
    content: "";
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    grid-area: 1/1/1/span 14;
    z-index: 2;
    mask: url("../../img/mask-intro.svg") no-repeat center/100% 100%;
    -webkit-mask: url("../../img/mask-intro.svg") no-repeat center/100% 100%;
    aspect-ratio: 2560/60;
    justify-self: center;
    background: var(--white);
}

.home-intro .media-container {
    grid-area: 1/1/span 3/span 14;
    width: calc(100% - (var(--m-sm) * 2));
    height: calc(100vh - var(--header-height) - var(--m-sm));
    height: calc(100svh - var(--header-height) - var(--m-sm));
    min-height: fit-content;
    justify-self: center;
    z-index: 1;
}

.home-intro .section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/1/1/span 14;
    z-index: 2;
    mask: url("../../img/mask-intro.svg") no-repeat center/100% 100%;
    -webkit-mask: url("../../img/mask-intro.svg") no-repeat center/100% 100%;
    aspect-ratio: 2068/250;
    width: 80.78125%;
    justify-self: center;
    margin-top: -1px;
}

.home-intro .section-divider img {
    width: max(64px, 6.875vw);
    height: auto;
}

.home-intro .content-container {
    grid-area: 2/1/2/span 14;
    padding: 0 calc(var(--grid-margin) + var(--grid-gap) + var(--m-sm));
    z-index: 2;
}

.home-intro .content-container .subline {
    max-width: 32ch;
}

.home-intro .btns-container {
    grid-area: 3/2/3/span 12;
    z-index: 2;
    max-width: 32ch;
    color: var(--white);
}

.home-intro .btns-container .default-btn:not(:last-child)::after {
    content: "";
    display: block;
    height: 100%;
    width: 2px;
    background: var(--white);
    position: absolute;
    top: 50%;
    left: calc(100% + (var(--grid-gap) / 2));
    z-index: 111;
    transform: translate(-50%,-50%);
}

@media (max-width: 991.98px) {
    .home-intro .media-container {
        width: 100%;
        height: calc(100vh - var(--header-height));
        height: calc(100svh - var(--header-height));
    }

    .home-intro .content-container {
        grid-area: 2/2/2/span 12;
        padding: 0;
        text-align: center;
        align-items: center;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 575.98px) {}