.project-hero {
    background-color: var(--color-background);
    position: relative;

    .project-hero__cta {
        position: absolute;
        display: grid;
        bottom: var(--space-40);

        .spasm-button {
            margin-inline: auto 0;
            grid-column: 2;

            @media (max-width: 749px) {
                margin-inline: 0 auto;
            }
        }
    }

    .project-hero__slideshow {
        grid-column: 1 / -1;
        
        slideshow-arrows .slideshow-control {
            opacity: 1;
            animation: arrowsSlideIn 0s var(--animation-easing) forwards;
            

            .svg-wrapper.icon-caret {
                height: var(--space-16);
                width: 1.875rem;

                @media (max-width: 749px) {
                    height: var(--space-12);
                    width: 0.875rem;
                }

                svg {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        slideshow-slide {
            width: 100%;
            height: var(--slide-min-height);

            @media (min-width: 750px) {
                height: var(--slide-min-height-desktop);
            }

            .project-hero__image, .project-hero__video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}