.section-1 {
    width: 100vw;
    height: fit-content;
    min-height: 100vh;
    display: grid;
    justify-content: center;
}

.bento-slider-container {
    width: 100vw;
    height: fit-content;
    min-height: calc(100vh - 5rem);
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    align-self: end;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--small);
    gap: var(--medium);
}

.bento-slider {
    display: grid;
    aspect-ratio: 2.04/1;
    max-width: calc(100vw - 8.625rem - 8.625rem);
    max-height: calc(100vh - 10rem);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 1vw;
}

@media (max-width: 320px) {
    .bento-slider,
    .bento-slider-container > h1 {
        max-width: calc(100vw - 1rem - 1rem);
    }   

    .bento-slider {
        aspect-ratio: 1/2.04;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

@media (min-width: 320px) {
    .bento-slider,
    .bento-slider-container > h1 {
        max-width: calc(100vw - 1rem - 1rem);
    }   

    .bento-slider {
        aspect-ratio: 1/2.04;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

@media (min-width: 480px) {
    .section-1 {
        height: fit-content;
        min-height: fit-content;
    }
    
    .bento-slider-container {
        padding-top: var(--xx-large);
        min-height: fit-content;
    }
    
    .bento-slider,
    .bento-slider-container > h1 {
        max-width: calc(100vw - 2rem - 2rem);
    }
       
    .bento-slider {
        aspect-ratio: 1.02/1;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (min-width: 600px) {
    .section-1 {
        height: fit-content;
        min-height: 100vh;
    }
    
    .bento-slider-container {
        padding-top: 5rem;
        min-height: calc(100vh - 5rem);
    }
}

@media (min-width: 1024px) {
    .section-1 {
        height: fit-content;
        min-height: fit-content;
    }
    
    .bento-slider-container {
        padding-top: var(--xx-large);
        min-height: fit-content;
    }
    
    .bento-slider {
        aspect-ratio: 2.04/1;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .section-1 {
        min-height: 100vh;
    }

    .bento-slider-container {
        padding: 0;
        min-height: calc(100vh - 5rem);
    }

    .bento-slider,
    .bento-slider-container > h1 {
        max-width: calc(100vw - 8.625rem - 8.625rem);
    }    
}


.bento {
    background-color: var(--lightblack);
    border-radius: var(--regular);
    overflow: hidden;
    position: relative;
}

.bento > div:nth-child(1) {
    width: 100%;
    height: 100%;
    position: absolute;;
    z-index: 3;
    display: grid;
    justify-content: center;
    align-items: center;
}

.bento > div:nth-child(1) > h2 {
    opacity: 0;
    transition: 300ms;
    z-index: 2;
    color: var(--brightwhite);
    text-align: center;
}

.bento:hover > div:nth-child(1) > h2 {
    opacity: 1;
}

.bento > div:nth-child(1) > div {
    width: 100%;
    height: 100%;
    transition: 300ms;
    opacity: 0;
    font-size: var(--large);
    position: absolute;
    backdrop-filter: blur(6px);
}

.bento:hover > div:nth-child(1) > div {
    opacity: 1;
    background-color: rgba(45, 44, 44, 0.6);
}

.bento-1 {
    display: grid;
    align-items: center;
}

.bento-1 > img {
    width: calc(100% - var(--regular) - var(--regular));
    justify-self: center;
}


.bento-2 {
    grid-column: span 2;
    width: 100%;
    position: relative;
}

.bento-2 > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.bento-2 > div:nth-child(2) > img:nth-child(1) {
    height: 100%;
    position: absolute;
    align-self: center;
    justify-self: center;
    z-index: 2;
}

.bento-2 > div:nth-child(2) > div {
    height: 85.5%;
    width: 18.9%;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: translateY(-1%);
    z-index: 1;
}

.bento-2 > div:nth-child(2) > div > video {
    height: 100%;
}

.bento-2 > div:nth-child(2) > img:nth-child(3) {
    height: 100%;
    position: absolute;
    align-self: center;
    justify-self: center;
    z-index: 0;
}

.bento-3 {
    grid-row: span 2;
    position: relative;
}

.bento-3 > div:nth-child(2) {
    width: 100%;
    height: 250%;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    position: absolute;
    animation: marquee-vertical 10s linear infinite;
}

@keyframes marquee-vertical {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-50%);
    }
}

.bento-3 > div > div {
    width: 100%;
    height: 100%;
    position: relative;
}

.bento-3 > div > div > img {
    width: 110%;
    position: absolute;
    bottom: 0;
    left: -5%;
}

.bento-4 {
    grid-column: span 2;
}

.bento-4 > div:nth-child(2) {
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.bento-4 > div:nth-child(2) > div:nth-child(1) {
    padding: var(--medium);
}

.bento-4-colours-container > img {
    max-width: 100%;
    height: calc(100% - var(--small) - var(--small));
    padding-right: var(--small);
}

.bento-4-colours-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.bento-4 > div:nth-child(2) > div:nth-child(1) > img {
    max-width: 100%;
    height: 100%;
}

.bento-4-colours-container {
    height: 100%;
}


.bento-5 > div:nth-child(2) {
    width: 100%;
    height: 100%;
}

.bento-5 > div > img {
    width: 100%;
    height: 100%;
    object-position: center; 
    object-fit: cover;   
}

@media (max-width: 320px) {
    .bento-1 {
        grid-row: 2;
    }

    .bento-2 {
        grid-row: 1;
    }

    .bento-3 {
        grid-column: 2;
        grid-row: span 2;
    }

    .bento-4 {
        grid-row: 4;
    }

    .bento-5 {
        grid-row: 3;
    }

    .bento-4 > div:nth-child(2) > div:nth-child(1) {
        padding: var(--small);
    }
}

@media (min-width: 320px) {
    .bento-1 {
        grid-row: 2;
    }

    .bento-2 {
        grid-row: 1;
    }

    .bento-3 {
        grid-column: 2;
        grid-row: span 2;
    }

    .bento-4 {
        grid-row: 4;
    }

    .bento-5 {
        grid-row: 3;
    }


    .bento-4 > div:nth-child(2) > div:nth-child(1) {
        padding: var(--small);
    }
}


@media (min-width: 480px) {
    .bento-1 {
        grid-row: 2;
    }
    
    .bento-2 {
        grid-row: 1;
    }
    
    .bento-3 {
        grid-column: 3;
        grid-row: span 3;
    }
    
    .bento-4 {
        grid-row: 3;
    }
    
    .bento-5 {
        grid-row: unset;
    }
}

@media (min-width: 600px) {

    .bento-4 > div:nth-child(2) > div:nth-child(1) {
        padding: var(--medium);
    }
}

@media (min-width: 1024px) {
    .bento-1 {
        grid-row: unset;
    }
    
    .bento-2 {
        grid-row: unset;
    }
    
    .bento-3 {
        grid-column: unset;
        grid-row: span 2;
    }
    
    .bento-4 {
        grid-row: unset;
    }
}

/* Section 2 */
.section-2 {
    width: 100vw;
    display: grid;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--xx-large);
}

.section-2 > div {
    width: calc(100vw - 8.625rem - 8.625rem);
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: var(--xx-large);
    overflow: visible;
    scrollbar-gutter: stable;
}

.section-2 > div > h1 {
    text-align: center;
}

.progress-about {
    position: relative;
}

.progress-about > div {
    display: grid;
    gap: var(--medium);
    position: sticky;
    top: 0;
    padding-top: var(--xx-large);
}

.section-2 > div > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--xx-large);
}

.section-2 > div > div:nth-child(2) > img {
    width: 80%;
}

.progress-about > div > a:nth-child(1):nth-child(1) {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--small);
    transition: 369ms;
    cursor: pointer;
    color: var(--orange);
    text-decoration: none;
}

.progress-about > div > a:nth-child(1):nth-child(1) > svg {
    height: var(--regular);
    stroke: var(--orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-width: var(--regular);
    transition: 369ms;
}

.progress-about > div > a:nth-child(1):hover {
    color: var(--darkorange);
}

.progress-about > div > a:nth-child(1):hover > svg {
    stroke: var(--darkorange);
}

.progress-about > div > div:nth-child(3) {
    display: grid;
    gap: var(--regular);
}

.progress-about > div > div:nth-child(3) > div {
    display: grid;
    gap: var(--small);
}

.progress-about > div > div:nth-child(3) > div:nth-child(3) > ul {
    list-style-type: disc;
    display: inline-block;
    list-style-position: inside;
    text-align: left;
    justify-content: left;
    padding: 0;
    margin: 0;
}

.progress-about > div > div:nth-child(4) {
    display: flex;
    gap: var(--medium);
}

@media (max-width: 320px) {
    .section-2 > div {
        width: calc(100vw - 2rem - 2rem);
        gap: var(--large);
        grid-template-columns: 1fr;
    }
}

@media (min-width: 320px) {
    .section-2 > div {
        width: calc(100vw - 1rem - 1rem);
        gap: var(--large);
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) {
    .section-2 > div {
        width: calc(100vw - 2rem - 2rem);
        gap: var(--large);
    }
}

@media (min-width: 1024px) {
    .section-2 > div {
        grid-template-columns: 5fr 4fr;
    }
}

@media (min-width: 1280px) {
    .section-2 > div {
        width: calc(100vw - 8.625rem - 8.625rem);
        gap: var(--xx-large);
    }
}