﻿.landing-pages__daredevil-born-again {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-image: url(/images_produits/cybertek/images-landing/daredevil-born-again/background.jpg);
    background-position: center;
    background-size: cover;

    & > .header {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;

        & img {
            width: max-content;
            height: fit-content;
        }
    }

    & > main {
        padding: 0px 0px 15px 0px;
        display: flex;
        flex-direction: column;
        gap: 35px;
        width: 100%;
        align-self: center;
        max-width: 1600px;

        @media screen and (max-width: 1920px) {
            max-width: 1280px;
        }

        @media screen and (max-width: 1300px) {
            padding: 0px 15px 15px 15px;
            max-width: 960px;
        }

        @media screen and (max-width: 1000px) {
            max-width: 960px;
            padding: 0px 15px 0px 15px;
        }

        & > .presentation {
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;

            @media screen and (max-width: 800px) {
                flex-direction: column;
            }

            & > img {
                width: fit-content;
                max-height: 425px;

                @media screen and (max-width: 800px) {
                    max-height: 375px;
                }
            }

            & > .image--mobile {
                display: none;

                @media screen and (max-width: 800px) {
                    display: block;
                }
            }

            & > .image--desktop {
                display: block;
                aspect-ratio: 4 / 5;
                max-width: 1080px;
                height: 40dvw;

                @media screen and (max-width: 800px) {
                    display: none;
                }
            }

            & .cta {
                background: #1F1F1F;
                color: white;
                padding: 5px 20px 5px 20px;
                font-size: 18px;
                display: flex;
                gap: 5px;
                align-items: center;
                width: fit-content;

                &:hover {
                    background: #1F1F1FCC;
                }

                &:active {
                    color: #FFDE4D;
                }
            }

            & > .content {
                width: 70%;
                display: flex;
                flex-direction: column;
                gap: 8px;
                max-width: fit-content;
                align-self: center;

                @media screen and (max-width: 800px) {
                    width: 100%;
                }
            }

            & > .full-width {
                width: 100%;
            }

            & > .last--mobile {
                @media screen and (max-width: 800px) {
                    order: 1;
                }
            }
        }

        & > .revive {
            & img {
                width: 100%;
                height: fit-content;
                max-width: max-content;
            }
        }

        & .rich-text {
            display: flex;
            flex-direction: column;
            gap: 7px;

            & h1 {
                font-size: 32px;
                font-weight: 600;
                color: #313131;
            }

            & h2 {
                font-size: 24px;
                font-weight: 600;
                color: #313131;
            }

            & h3 {
                font-size: 20px;
                font-weight: 700;
                color: #1F1F1F;
            }

            & p,
            & a {
                font-size: 13px;
                line-height: normal;
                color: #535353;
                font-weight: 500;
            }

            & a {
                text-decoration: underline;
            }

            & ul {
                & > li {
                    padding-left: 5px;
                }
            }
        }

        & > .link {
            align-items: center;
            align-self: center;
            background: #1F1F1F;
            color: white;
            display: flex;
            height: 150px;
            justify-content: center;
            padding: 10px;
            max-width: 450px;
            width: 100%;

            & > span {
                font-size: 24px;
                font-weight: 600;
            }

            & > svg {
                height: 16px;
                width: 24px;
            }

            &:hover {
                background: #1F1F1FCC;
            }

            &:active {
                color: #FFDE4D;
            }
        }

        & > .product-slider {
            display: flex;
            flex-direction: column;
            gap: 15px;

            & > .title {
                font-size: 20px;
                font-weight: 600;
            }
            /* Overwrite Slider.ascx css */
            & .slider__container {
                width: 100%;
            }
            /* Fin Overwrite Slider.ascx css */
        }
    }

    & > .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 300px;
        gap: 10px;
        background-image: url(/images_produits/cybertek/images-landing/daredevil-born-again/footer-background.jpg);
        background-size: cover;
        background-position: center;

        & > img {
            height: 20px;
        }

        & > span {
            color: white;
            text-align: center;
            font-family: Montserrat;
            font-size: 32px;
            font-style: normal;
            font-weight: 600;
        }
    }
}
