#intro {
    .content {
        position: relative;

        .intro-content {
            will-change: auto;

            @media screen and (max-width: 767px) {
                position: absolute;
                bottom: 15%;
                height: auto;
            }

            @media screen and (min-width: 768px) {
                display: inline-flex;
                flex-direction: column;
                height: 100%;
                justify-content: center;
            }

            .subtitle {
                position: relative;
                padding: 10px 15px;

                &::after {
                    content: '';
                    width: 93%;
                    height: 60px;
                    display: block;
                    position: absolute;
                    top: -1px;
                    background: var(--green);
                    z-index: -1;
                    left: 0;
                }
            }
        }

        .intro-image {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            filter: drop-shadow(5px 5px 15px var(--dark-darker));
            object-fit: contain;
            object-position: bottom right;
            will-change: auto;

            &__wrapper {
                position: absolute;
                right: 0;
                bottom: 2px;
                width: 100%;
                height: 100%;

                @media screen and (min-width: 768px) {
                    max-width: 50%;
                }
            }
        }
    }
}