.block__socials {
    position: relative;
    height: 9rem;
    background-color: var(--black);
    z-index: 1;
}

section[class^="block__"]:has(+.block__socials) {
    padding-bottom: 8rem;
}

.socials__images {
    width: calc(100% + 3rem);
    height: 11rem;
    display: flex;
    overflow: hidden;
    position: absolute;
    top: -1rem;
    left: -1.5rem;
    transform: rotate(1deg);
}

    .socials__images ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-shrink: 0;
        justify-content: space-around;
        min-width: 100%;
        animation: scrollSocial 10s linear infinite;
    }

    .socials__images:hover ul {
        animation-play-state: paused;
    }

@keyframes scrollSocial {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@media(min-width: 992px) {
    .socials__images {
        height: 29rem;
        top: -2rem;
    }

        .socials__images ul {
            animation-duration: 30s;
        }

        .socials__images picture,
        .socials__images img {
            height: 100%;
            width: auto;
        }
}