.c-hero {
    @apply relative;
    z-index: 1;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .0125));
        z-index: -1;
    }
}

.c-hero__decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.c-hero__image {
    @apply w-full block relative object-cover;
    height: 30rem;
    z-index: -2;

    @screen lg {
        height: 40rem;
    }
}

.c-hero__text {
    @apply flex flex-col justify-center items-center absolute max-w-4xl mx-auto text-white text-center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 3rem;
}

.c-hero__title {
    @apply text-4xl my-0;

    @screen md {
        @apply text-5xl;
    }

    @screen lg {
        @apply text-6xl;
    }
}

h2.c-hero__title {
    text-transform: none;
}

.c-hero__subtitle {
    @apply text-xl max-w-2xl mt-4;
}

.c-hero__button {
    @apply mt-10;
}

.c-hero.tb-swiper__slide {
    .c-hero__text {
        top: auto;
        bottom: 1rem;
        margin-left: 1rem;
        align-items: baseline;
        justify-content: flex-start;

        @media screen and (min-width: 23rem) {
            bottom: 0;
            top: 55%;
        }

        @screen md {
            margin-left: 5rem;
        }

        @screen lg {
            margin-left: 7rem;
        }
    }
}
