main {
    display: flex;
    /* The flex must be LTR for the arrows to make sense. */
    direction: ltr;
    flex-direction: row;
    justify-content: space-between;
    gap: 5rem;
}

main > figure {
    width: auto;

    & img {
        max-width: 100%;
    }
}

main > .arrow {
    flex: 4rem 1 0;
    position: relative;

    &:first-child {
        --arrow-direction: -1;
    }

    &:last-child {
        --arrow-direction: 1;
    }

    & > a {
        display: block;
        width: 100%;
        height: 100%;

        &::before, &::after {
            content: "";
            display: block;
            width: 2rem;
            height: 2rem;
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            background-color: currentColor;
        }

        &::before {
            clip-path: polygon(
                calc(50% + var(--arrow-direction) * 8%) 90%,
                calc(50% + var(--arrow-direction) * 0%) 83%,
                calc(50% + var(--arrow-direction) * 35%) 50%,
                calc(50% + var(--arrow-direction) * 0%) 17%,
                calc(50% + var(--arrow-direction) * 8%) 10%,
                calc(50% + var(--arrow-direction) * 50%) 50%,
                calc(50% + var(--arrow-direction) * 8%) 90%
            );
        }

        &::after {
            transition: clip-path var(--duration-transitions);
            clip-path: rect(44% calc(50% - var(--arrow-direction) * 50%) 56% calc(50% - var(--arrow-direction) * 50%));
        }

        &:is(:hover, :focus-visible)::after {
            clip-path: rect(44% calc(95% - var(--arrow-direction) * 5%) 56% calc(5% - var(--arrow-direction) * 5%));
        }
    }
}

@media (width <= 55rem) {
    main {
        gap: 0;
    }
}

@media (max-aspect-ratio: 1/1.2) {
    main {
        flex-wrap: wrap;
        gap: 1rem 5rem;
    }

    main > .arrow {
        flex: 2rem 1 0;
        height: 2rem;
    }

    main > figure {
        order: 1;
        width: 100%;

        & > img {
            width: 100%;
        }
    }
}