@media (min-width: 1025px) {
    .projects-container {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        gap: var(--gap-positive-1200);
        align-items: flex-start;
        padding: var(--gap-positive-1200) var(--gap-positive-700) 0 var(--gap-positive-700);
        border-radius: var(--shape-large);
        background-color: var(--theme-surface-tint-2);
        box-shadow: var(--elevation-low);
        opacity: 0;
        transform: translateY(20%);
        transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .projects-container {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap-reverse;
        row-gap: var(--gap-positive-1200);
        column-gap: var(--gap-positive-2400);
        align-items: flex-start;
        padding: var(--gap-positive-1200) var(--gap-positive-700) 0 var(--gap-positive-700);
        border-radius: var(--shape-large);
        background-color: var(--theme-surface-tint-2);
        box-shadow: var(--elevation-low);
        opacity: 0;
        transform: translateY(20%);
        transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);
    }
}

@media (max-width: 640px) {
    .projects-container {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        gap: var(--gap-positive-1200);
        align-items: flex-start;
        padding: var(--gap-positive-700) var(--gap-positive-400) 0 var(--gap-positive-400);
        border-radius: var(--shape-large);
        background-color: var(--theme-surface-tint-2);
        box-shadow: var(--elevation-low);
        opacity: 0;
        transform: translateY(20%);
        transition: 1000ms cubic-bezier(0.25, 1, 0.5, 1);
    }
}