.hero {
    width: 100%;
    position: relative;
    background-color: #032433
}

    .hero img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0
    }

    .hero.has-image:before {
        display: none
    }

    .hero.hero--w-gradient:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(0deg,#0000 80.48%,#000000d9),linear-gradient(204deg,#0000 8.36%,#000000d9 54.15%);
        z-index: 1
    }

.hero__text-home-page-width {
    max-width: 675px !important;
}

.hero__text-full-width {
    max-width: 100% !important;
}

@media (min-width: 821px) {
    .hero.hero--w-gradient:after {
        background: linear-gradient(0deg,#0000 80.48%,#000000d9),linear-gradient(202deg,#0000 20.98%,#000000d9 63.77%)
    }
}

@media (min-width: 992px) {
    .hero.hero--w-gradient:after {
        background: linear-gradient(259deg,#0000 35.6%,#000000d9 79.97%)
    }
}

.hero__container {
    max-width: 1440px;
    padding: 40px 24px;
    position: relative;
    color: #fff
}

@media (min-width: 821px) {
    .hero__container {
        padding-right: 64px;
        padding-left: 64px;
        margin: 0 auto
    }
}

.hero__container .hero__top, .hero__container .hero__content, .hero__container .hero__form {
    position: relative;
    z-index: 2
}

    .hero__container .hero__top h1, .hero__container .hero__top p, .hero__container .hero__content h1, .hero__container .hero__content p, .hero__container .hero__form h1, .hero__container .hero__form p {
        color: #fff
    }

.hero__container .hero__top {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 40px
}

@media (min-width: 821px) {
    .hero__container .hero__top {
        gap: 32px
    }
}

.hero__container .hero__top .share {
    display: none
}

@media (min-width: 821px) {
    .hero__container .hero__top .share {
        display: block
    }
}

.hero__container .hero__content {
    display: flex;
    gap: 16px;
    flex-direction: column-reverse
}

@media (min-width: 821px) {
    .hero__container .hero__content {
        gap: 32px
    }
}

.hero__container .hero__content.hero__content--article {
    flex-direction: column
}

@media (min-width: 992px) {
    .hero__container .hero__content, .hero__container .hero__content.hero__content--article {
        flex-direction: row;
        justify-content: space-between
    }

        .hero__container .hero__content.hero__content--article .hero__text {
            flex: 1 1 calc(66.6666666667% - 16px);
            width: calc(66.6666666667% - 16px);
            max-width: none
        }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero__container .hero__content.hero__content--article .hero__text {
        flex: 1 1 calc(66.6666666667% - 32px);
        width: calc(66.6666666667% - 32px)
    }
}

@media (min-width: 992px) {
    .hero__container .hero__text {
        max-width: 66.666%
    }
}

.hero__container .hero__text .tag--format {
    margin-bottom: 24px
}

.hero__container .hero__text .hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px
}

.hero__container .hero__text h1 {
    font-family: DM Sans,sans-serif;
    font-size: 42px;
    line-height: 120%;
    font-weight: 700;
    margin-bottom: 24px
}

@media (min-width: 821px) {
    .hero__container .hero__text h1 {
        font-family: DM Sans,sans-serif;
        font-size: 56px;
        line-height: 120%;
        font-weight: 700
    }
}

.hero__container .hero__text .button {
    position: relative;
    z-index: 2;
    margin-top: 32px
}

    .hero__container .hero__text .button.button--primary.button--icon:after {
        content: url(../images/arrow-down-black.svg)
    }

    .hero__container .hero__text .button.button--primary.button--icon:hover:after {
        content: url(../images/arrow-down-white.svg)
    }

.hero__container .hero__callout .cta-tile--publication {
    border: none
}

@media (min-width: 992px) {
    .hero__container .hero__callout {
        padding-left: 24px;
        text-align: right
    }
}

.hero__container .hero__article-details {
    display: flex;
    flex-direction: column;
    gap: 24px
}

    .hero__container .hero__article-details .hero__article-details-label {
        font-family: DM Sans,sans-serif;
        font-size: 12px;
        line-height: 120%;
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        color: #ffffffb3;
        letter-spacing: 1.2px;
        text-transform: uppercase
    }

@media (min-width: 992px) {
    .hero__container .hero__article-details {
        flex: 1 1 calc(33.3333333333% - 16px);
        width: calc(33.3333333333% - 16px)
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero__container .hero__article-details {
        flex: 1 1 calc(33.3333333333% - 32px);
        width: calc(33.3333333333% - 32px)
    }
}

.hero__container .hero__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 32px
}

    .hero__container .hero__form .hero__form-input {
        color: #000;
        width: auto;
        min-width: 330px;
        height: 64px
    }

        .hero__container .hero__form .hero__form-input::placeholder {
            color: #21282d
        }

    .hero__container .hero__form .button {
        margin-right: 24px
    }

    .hero__container .hero__form .hero__form-link {
        font-family: DM Sans,sans-serif;
        font-size: 14px;
        line-height: 145%;
        font-weight: 400;
        display: inline-block;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        margin-top: 24px;
        width: 100%
    }

        .hero__container .hero__form .hero__form-link:after {
            content: url(../images/arrow-down-white.svg);
            display: inline-block;
            margin-left: 10px
        }

        .hero__container .hero__form .hero__form-link:hover, .hero__container .hero__form .hero__form-link:focus-visible {
            text-decoration: underline
        }

@media (min-width: 992px) {
    .hero__container .hero__form .hero__form-link {
        margin-top: 0;
        width: auto
    }
}

.hero__mobile-share {
    padding: 16px 24px
}

    .hero__mobile-share .share {
        justify-content: end
    }

@media (min-width: 821px) {
    .hero__mobile-share {
        display: none
    }
}

.hero--fancy .hero__container {
    height: 100%
}

@media (min-width: 992px) {
    .hero--fancy .hero__container {
        max-width: 1440px;
        padding: 40px 24px 80px
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero--fancy .hero__container {
        padding-right: 64px;
        padding-left: 64px;
        margin: 0 auto
    }
}

@media (max-width: 991px) {
    .hero--fancy .hero__container:after {
        background: linear-gradient(0deg,#001d2500 79.5%,#001d25b3),linear-gradient(189deg,#00486800 19.1%,#004868f2 44.63%)
    }
}

@media (min-width: 992px) {
    .hero--fancy .hero__container:after {
        background: linear-gradient(0deg,#001d2500 79.5%,#001d25b3),linear-gradient(259deg,#00486800 31.87%,#004868f2 79.95%)
    }
}

@media (max-width: 991px) {
    .hero--fancy .hero__container .hero__content {
        margin-top: 112px
    }
}

@media (min-width: 992px) {
    .hero--fancy .hero__container .hero__content {
        /*min-height: 488px*/
    }
}

@media (max-width: 991px) {
    .hero--fancy .hero__container .hero__title {
        margin-bottom: 16px
    }
}

@media (max-width: 991px) {
    .hero--fancy .hero__container .hero-callout {
        border: none
    }
}

@media (min-width: 992px) {
    .hero--fancy .hero__container .hero__text {
        /*margin-top: auto*/
    }
}

@media (max-width: 991px) {
    .hero--fancy .hero__container .button {
        margin-top: 16px
    }
}

@media (max-width: 991px) {
    .hero--event-header .hero__content {
        gap: 32px
    }
}

@media (min-width: 992px) {
    .hero--event-header .hero__content {
        gap: 56px !important
    }
}

@media (min-width: 992px) {
    .hero--event-header .hero__text {
        flex: 1 1 calc(50% - 16px);
        width: calc(50% - 16px)
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero--event-header .hero__text {
        flex: 1 1 calc(50% - 32px);
        width: calc(50% - 32px)
    }
}

.hero--event-header .hero__event-info {
    order: -1
}

@media (min-width: 992px) {
    .hero--event-header .hero__event-info {
        flex: 1 1 calc(33.3333333333% - 16px);
        width: calc(33.3333333333% - 16px);
        order: 2
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero--event-header .hero__event-info {
        flex: 1 1 calc(33.3333333333% - 32px);
        width: calc(33.3333333333% - 32px)
    }
}

.hero--event-header .hero__callout {
    margin: 0;
    padding: 0
}

@media (min-width: 992px) {
    .hero--event-header .hero__callout {
        flex: 1 1 calc(16.6666666667% - 16px);
        width: calc(16.6666666667% - 16px);
        order: 3
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .hero--event-header .hero__callout {
        flex: 1 1 calc(16.6666666667% - 32px);
        width: calc(16.6666666667% - 32px)
    }
}

.hero--event-header .countdown {
    margin-top: 8px
}

.hero__event-info {
    display: flex;
    flex-direction: column;
    gap: 24px
}

    .hero__event-info .hero__event-info-label {
        font-family: DM Sans,sans-serif;
        font-size: 12px;
        line-height: 120%;
        font-weight: 700;
        display: block;
        color: #ffffffb3;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-bottom: 5px
    }

    .hero__event-info p {
        color: #fff
    }

.hero__share {
    position: relative;
    z-index: 5;
    margin-top: -20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .hero__share {
        margin-top: -25px;
        margin-bottom: 25px;
    }
}

@media (min-width: 1200px) {
    .hero__share {
        margin-top: -30px;
        margin-bottom: 30px;
    }
}