.c-hero-live-section {
    @apply text-white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 2rem;
}

.c-hero-live-section-tab {
    position: relative;
    flex-grow: 1;
    padding: 0 .5rem;

    @screen md {
        padding: 0;
        flex-grow: 0;
    }
}

.c-hero-live-section-tab + .c-hero-live-section-tab {
    &::before {
        content: '';
        display: none;
        position: absolute;
        top: 5.5rem;
        height: 5rem;
        width: 1px;
        background-color: #fff;

        @screen lg {
            display: block;
            left: -2rem;
        }
    }
}

.c-hero-live-section-tab--snowreport {
    @apply pb-8 mb-8 border-b border-white;
    order: 1;
    width: 100%;

    @screen md {
        @apply pb-0 mb-0 border-none;
        order: unset;
        width: 340px;
    }
}
.c-hero-live-section-tab--webcams {
    order: 2;
    width: 50%;

    @screen md {
        order: unset;
        width: 340px;
    }
}
.c-hero-live-section-tab--tickets {
    order: 3;
    width: 50%;
    border-left: 1px solid #fff;

    @screen md {
        border-left: 0;
        order: unset;
        width: 340px;
    }
}
.c-hero-live-section-tab__headline {
    @apply font-bold text-center uppercase;
    font-family: 'HeadingFontFamily', 'BaseFontFamily', serif;
    color: #fff;
    font-size: $heading-font-size--125;
    margin: 0;

    @screen lg {
        font-size: $heading-font-size--15;
    }
}

.c-hero-live-section__inner {
    @apply flex justify-center flex-wrap;
    width: 100%;

    @screen md {
        @apply px-4;
        flex-wrap: nowrap;
        gap: 2rem;
    }

    @screen lg {
        gap: 4rem;
    }
}

// Live Section Item
.c-hero-live-section-item {
    @apply flex flex-col items-center justify-center;
}
.c-hero-live-section-item__icon {
    max-width: 2.5rem;
    max-height: 2.5rem;
    color: #fff;
    fill: #fff;
}
.c-hero-live-section-item__title {
    @apply text-center font-bold mt-3;
    font-size: 1.25rem;
    line-height: 1.25;
    white-space: nowrap;

    @screen lg {
        font-size: 1.5rem;
    }
}
.c-hero-live-section-item__link {
    @apply border-b border-white mt-4;

    font-size: .875rem;
    transition: opacity .2s;

    &:hover,
    &:focus {
        opacity: .75;
    }

    @screen md {
        font-size: 1rem;
    }
}
.c-hero-live-section-item__dot {
    @apply ml-2;
    width: .5rem;
    height: .5rem;
    background-color: #fff;
    border-radius: 50%;
    animation: livePulse 2.5s infinite;
}

.c-hero-live-section__content {
    @apply flex flex-col items-center justify-center;
    margin-top: 2rem;

    @screen md {
        margin-top: 3rem;
    }
}

.c-hero-live-section__content-flex {
    @apply flex justify-center items-start gap-8;

    @screen xxs {
        gap: 2.5rem;
    }
}

.c-hero-live-section-tab--tickets .c-button {
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.25;
    text-align: center;

    @screen md {
        padding: .75rem 2rem;
        font-size: 1rem;
    }
}

@keyframes livePulse {
    50% {
        opacity: .3;
    }
}
