@media (min-width: 1024px) {
    .project-thumbnails {
        width: 480px;
        height: 480px;
        display: flex;
        flex-direction: column;
        gap: var(--gap-positive-2400);
        align-items: center;
        overflow: hidden;

        .project-thumbnail {
            width: 480px;
            transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);

            img {
                width: 480px;
                object-fit: contain;
            }
        }
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .project-thumbnails {
        min-width: 480px;
        width: 100%;
        height: 480px;
        display: flex;
        flex-direction: column;
        gap: var(--gap-positive-2400);
        align-items: center;
        overflow: hidden;

        .project-thumbnail {
            width: 480px;
            transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);

            img {
                width: 480px;
                object-fit: contain;
            }
        }
    }
}

@media (max-width: 640px) {
    .project-thumbnails {
        width: 100%;
        height: 320px;
        display: flex;
        flex-direction: column;
        gap: var(--gap-positive-2400);
        align-items: center;
        overflow: hidden;

        .project-thumbnail {
            width: 320px;
            transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);

            img {
                width: 320px;
                object-fit: contain;
            }
        }
    }
}