.detailpage {
    --red-100: #E73331;
    --yellow-100: #FDC300;
    --white: #FAFAFF;
}

.detailpage__intro {
    width: 100%;
    height: 650px;
    background-color: var(--red-100);

    & a {
        gap: 25px;
        margin-top: 350px;
        color: black;
        font-size: 32px;
        line-height: 38px;
        text-decoration: none;

        & > span {
            display: block;
            width: 65px;
            height: 65px;
            background-color: black;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

            & img {
                width: 20px;
            }
        }
    }
}

.detailpage-quote {
    background: linear-gradient(var(--red-100) 50%, var(--yellow-100) 50.001%, var(--yellow-100) 100%);
}

.detailpage-quote__quote {

    & .image {
        position: relative;
        width: 500px;
        height: 500px;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        z-index: 2;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .content {
        position: relative;
        width: calc(100% - 500px);
        padding: 90px 120px 90px 70px;
        border-radius: 20px;
        background: var(--white);

        & .cms-output {
            margin-top: 50px;
            font-size: 36px;
            line-height: 45px;
        }

        &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -50px;
            width: 100px;
            border-radius: 20px 0 0 20px;
            background-color: var(--white);
            content: '';
            z-index: 0;
        }
    }
}

.detailpage-content {
    padding: 100px 0;
    background-color: var(--yellow-100);
}

.detailpage-socials {
    padding-bottom: 100px;
    background-color: var(--yellow-100);

    & h2 {
        color: var(--white);
        font-size: 45px;
        line-height: 55px;
    }

    & .wrapper {

        & > .d-flex {
            gap: 30px;
        }
    }
}

.detailpage-socials__items {
    gap: 10px;

    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        background-color: black;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);


        & svg {
            height: 30px;

            & path {
                fill: var(--white);
            }
        }
    }
}

@media only screen and (max-width: 991px) {

    .detailpage__intro {
        height: auto;

        & a {
            margin: 250px 0 75px;
        }
    }


    .detailpage-quote {
        padding: 75px 0;
        background: var(--yellow-100);

        & .image {
            position: relative;
            width: 250px;
            height: 250px;
            z-index: 3;
        }

        & .content {
            width: 100%;
            padding: 30px;

            &::before {
                top: -50px;
                right: 0;
                left: 0;
                width: 100%;
                height: 100px;
                border-radius: 20px 20px 0 0;
                z-index: -1;
            }
        }
    }

    .detailpage-quote__quote {
        justify-content: center;
        text-align: center;

        & .content {
            position: relative;
            z-index: 2;

            & .cms-output {
                margin-top: 30px;
                font-size: 18px;
                line-height: 28px;
            }
        }
    }

    .detailpage-content {
        padding: 0 0 75px;
    }

    .detailpage-socials {
        padding-bottom: 75px;
    }
}