.my-workshop {
    background: url("/assets/img/inner-pages/my-workshop/tree-trunk-background.webp") center 20% no-repeat;
    aspect-ratio: 16 / 9;
    background-size: contain;

    .workshop-text {

        img {
            width: 100%;
            height: auto;

            &.workshop-exterior {
                /* Bootstrap sm */
                @media (min-width: 576px) {
                    width: 45%;
                }
                /* Bootstrap md */
                @media (min-width: 768px) {
                    width: 25%;
                }
            }

            &.swallows {
                /* Bootstrap sm */
                @media (min-width: 576px) {
                    width: 35%;
                }
                /* Bootstrap md */
                @media (min-width: 768px) {
                    width: 15%;
                }
            }

            &.perched {
                /* Bootstrap sm */
                @media (min-width: 576px) {
                    width: 45%;
                }
                /* Bootstrap md */
                @media (min-width: 768px) {
                    width: 30%;
                }
            }

            &.sweet-chestnut {
                /* Bootstrap sm */
                @media (min-width: 576px) {
                    width: 40%;
                }
                /* Bootstrap md */
                @media (min-width: 768px) {
                    width: 15%;
                }
            }
        }
    }

    .collage-image {
        background: url("/assets/img/inner-pages/my-workshop/tree-field-background.jpeg") center bottom no-repeat;
        background-size: cover;
        padding-bottom: 10em;

        img {
            width: 100%;
            max-width: 800px;
            height: auto;
        }
    }
}

.swiper {
    width: 100%;
    padding: 0 0 10px 0;
    min-height: 355px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.swiper-button:after {
    color: #ffb727;
    padding: 5px;
}