:root {
    background: black;
}

* {
    padding: 0;
    margin: 0;
}

body {
    overflow: hidden;
    display: flex;
}

.wrapper {
    display: flex;
    height: 100svh;
    animation: parade 60s linear infinite;
}

figure {
    height: 100%;
    flex-shrink: 0;
    background: red;
}

figure:nth-child(1) {
    aspect-ratio: 236.26 / 231.68;
    mask: url("p.svg") center / contain no-repeat;
    overflow: hidden;

}

figure:nth-child(2) {
    aspect-ratio: 267.18/ 231.68;
    mask: url("a.svg") center / contain no-repeat;
    overflow: hidden;
    margin-left: -1.75rem;

}

figure:nth-child(3) {
    aspect-ratio: 244.06/ 231.38;
    mask: url("r.svg") center / contain no-repeat;
    overflow: hidden;
    margin-left: 0.6875rem;
}

figure:nth-child(4) {
    aspect-ratio: 267.18/ 231.68;
    mask: url("a.svg") center / contain no-repeat;
    overflow: hidden;
    margin-left: 0.375rem;
}

figure:nth-child(5) {
    aspect-ratio: 247.71/231.68;
    mask: url("d.svg") center / contain no-repeat;
    overflow: hidden;
    margin-left: 0.375rem;
}

figure:nth-child(6) {
    aspect-ratio: 213.09/ 231.68;
    mask: url("e.svg") center / contain no-repeat;
    overflow: hidden;
    margin-left: 1.0625rem;
}

figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes parade { 
    to{
        transform: translateX(-100%);
    }
}