div.mm-toy-story {
    --width: 800px;
    overflow-x: hidden;

    @media (max-width: 800px) {
        --width: 600px;
    }

    @media (max-width: 600px) {
        --width: 80%;
    }

    div.banner {
        max-width: var(--width);
        margin: 0 auto;

        background-image: url("../../../images/special/ia-ts/clouds-SUdnCmN.png");
        background-size: cover;

        padding: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        div.left {
            flex: 1;

            img {
                width: 80%;
                margin-left: -90px;
            }
        }

        div.right {
            --size: 200px;
            --monsterOffset: -101px;

            @media (max-width: 450px) {
                --size: 150px;
            }

            background-color: white;
            width: var(--size);
            height: var(--size);
            position: relative;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            img.brand {
                width: 80%;
            }

            img.phoebe {
                position: absolute;
                right: var(--monsterOffset);
                height: 145px;
            }
        }

        @media (max-width: 920px) {
            div.left {
                min-width: 250px;
                img {
                    margin-left: 0;
                    margin: 0 auto;
                }
            }

            div.right {
                margin-top: 22px;
                margin-right: 100px;
            }
        }
    }

    div.content {
        max-width: calc(var(--width) - 40px);
        margin: 0 auto;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin: 0 auto;
        padding: 22px;
        margin-bottom: 22px;

        div.details {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 22px;
            justify-content: space-between;
            width: 80%;
            margin: 0 auto;
            margin-top: 22px;

            div.date, div.times {
                display: flex;
                align-items: center;
                gap: 9px;
                
                svg {
                    fill: var(--colour-clara);
                    width: 40px;
                }

                p {
                    font-size: 1.4rem;
                    font-weight: bold;
                }
            }
        }

        svg.plus {
            fill: white;
            width: 25px;
            margin: 0 auto;
            display: block;
            margin-top: 22px;
        }

        div.book {
            margin-top: 22px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 22px;

            p {
                font-size: 0.9rem;
            }

            @media (max-width: 600px) {
                flex-direction: column;

                p {
                    text-align: center;
                }

                a.button {
                    width: 100%;
                }
            }
        }
    }
}