* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    scroll-behavior: smooth;
}

html {
    scroll-snap-type: x mandatory;
}

body {
    background: #1E1E1E;
}

.wrapper {
    display: flex;
    align-items: center;
    height: 98vh;
    width: fit-content;
}

.slider {
    display: flex;
    height: 100%;
    gap: 100px;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    scroll-snap-align: center;
}

img {
    display: block;
    width: 100%;
    aspect-ratio: 2/3;
    filter: drop-shadow(0 0 4px black);
    transition: transform 250ms, filter 250ms;
}

img:hover {
    cursor: pointer;
    transform: scale(1.04);
    filter: drop-shadow(0 0 8px black);
}