@import url("../features/play-button.5b3bf6dc30b1.css");
@import url("../features/media-player.d6ffb148c2f9.css");

#brief-container .wrapper {
    padding-bottom: 0;
}

#brief-container .inner-content {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    margin-bottom: 2rem;
    overflow: hidden;
}

#brief-container .inner-content .title {
    overflow: hidden;
}

#brief-container .inner-content .title>.inner-most-content:not(.animate) {
    animation: faded-slide-up 1s both 0.2s;
}

#brief-container .img-preview-wrapper {
    display: flex;
    gap: 2rem;
}

.img-preview-wrapper .img-preview-container,
.img-preview-wrapper .img-preview-container .larger-img {
    width: 100%;
}

.img-preview-wrapper .img-preview-container .floating-container.larger-img {
    background: no-repeat center/cover rgba(17, 75, 138, 0.035);
    max-width: 700px;
    height: 275px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
}

.img-preview-wrapper .img-preview-container .floating-container.larger-img.lazy {
    background-image: none;
}

.img-preview-container.video-content .floating-container.larger-img {
    background-image: url("../../images/banners/05.240c938f4cab.jpg");
}

.img-preview-container.mission-content .floating-container.larger-img {
    background-image: url("../../images/banners/06.06d3af3fc8a0.jpg");
}

#brief-container .img-preview-container .floating-container.larger-img::after {
    content: "";
    background-image: linear-gradient(to top, var(--celtic-blue-a60) 10%, rgba(0, 0, 0, 0) 30%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

#brief-container .floating-container.badges-wrapper {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    position: relative;
    top: -18%;
    right: -10px;
}

#brief-container .badges-wrapper:not(.small-screen) .contents-badge.animate {
    transform: translateY(-50%);
}

#brief-container .badges-wrapper:not(.small-screen) .contents-badge:not(.animate) {
    animation: float-down 2s both 0.2s;
}

#brief-container .badges-wrapper .contents-badge.lazy {
    background-image: none;
}

#brief-container .badges-wrapper .contents-badge {
    background: url("../../images/pattern-2.669a9fafed19.png") no-repeat center right/contain var(--azure);
    color: var(--white);
    width: 100%;
    min-height: 150px;
    margin-left: auto;
    padding: 2rem 1rem;
    border-radius: 10px;
}

#brief-container .badges-wrapper .contents-badge .mini-title {
    font-size: 1.25rem;
    color: inherit;
    margin: 0;
}

#brief-container .badges-wrapper .contents-badge .sub-text {
    font-size: 0.9rem;
    line-height: 1.38rem;
    color: inherit;
    margin-top: 0.6rem;
}

#brief-container .badges-wrapper #play-area,
#brief-container .badges-wrapper .counter-area {
    width: 100%;
}

#brief-container .badges-wrapper .counter-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--white);
}

#brief-container .badges-wrapper .counter-area .fl-counter {
    font-size: 2.5rem;
    color: inherit;
    margin: 10px 0 0;
}

#brief-container .badges-wrapper .counter-area .fl-subtext {
    font-size: 0.8rem;
    line-height: 1.28rem;
    color: inherit;
    margin: 0;
}

@media (min-width: 1081px) {
    #brief-container .inner-content .title {
        padding-right: 2rem;
    }

    #brief-container .badges-wrapper .contents-badge {
        max-width: 350px;
        max-width: 450px;
    }

    #brief-container .badges-wrapper.small-screen .contents-badge {
        display: none;
    }

    #brief-container+#certs-container {
        margin-top: 0;
    }

    @media (min-width: 1500px) {

        #brief-container .badges-wrapper #play-area,
        #brief-container .badges-wrapper .counter-area {
            width: 80%;
            margin-left: auto;
        }
    }

    @media (max-width: 1280px) {
        #brief-container .floating-container.badges-wrapper {
            grid-template-columns: 0.3fr 0.7fr;
        }
    }
}

@media (max-width: 1080px) {
    #brief-container .badges-wrapper.small-screen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 2rem;
        margin: 2rem 0 5rem;
    }

    #brief-container .badges-wrapper:not(.small-screen) .contents-badge {
        display: none;
    }

    #brief-container .badges-wrapper #play-area,
    #brief-container .badges-wrapper .counter-area {
        width: fit-content;
        position: absolute;
        top: -100px;
        left: 15%;
    }

    @media (min-width: 801px) {

        #brief-container .badges-wrapper #play-area,
        #brief-container .badges-wrapper .counter-area {
            top: -75px;
        }
    }

    @media (min-width: 501px) and (max-width: 800px) {

        #brief-container .badges-wrapper #play-area,
        #brief-container .badges-wrapper .counter-area {
            top: -150px;
        }
    }
}

@media (max-width: 800px) {
    #brief-container .img-preview-wrapper {
        flex-direction: column;
    }

    #brief-container .badges-wrapper.small-screen {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }
}

@media (min-width: 501px) {
    .img-preview-wrapper .img-preview-container .floating-container.larger-img {
        height: 350px;
    }

    #brief-container .badges-wrapper .contents-badge {
        padding: 2rem;
    }
}