* {
    --body-font: clamp(1rem, 1.75vw, 6rem);
    --timeline-item-width: clamp(25rem, 40vw, 110rem);
    --timeline-item-height: calc(var(--timeline-item-width) * 0.8);
}

.content {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-height) + 5vh);
    height: 100%;
    padding-bottom: calc(var(--footer-height) + 2rem);
}

.text {
    display: flex;
    flex-direction: row;
    gap: 2%;
    padding: 0 5%;
}

.text h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 2);
    color: var(--purple);
}

.text p {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--purple);
    font-size: calc(var(--body-font) * 1);
}

.timeline-scroll-section {
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    top: -20%;
}

.timeline-wrapper {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.timeline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5%;
    height: 100%;
    padding: 3% 5%;
    will-change: transform;
    width: max-content;
}

.item {
    width: var(--timeline-item-width);
    height: var(--timeline-item-height);
    border-radius: 2rem;
}

.item img {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

.item-text-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: var(--timeline-item-width);
    height: var(--timeline-item-height);
}

.item-title {
    width: 100%;
    padding: 2%;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 2);
    text-align: left;
    color: var(--pink);
    background-color: var(--white);
    border-top-left-radius: 2rem;
    clip-path: polygon(0 0, 55% 1%, 45% 77%, 0% 100%);
}

.item-text {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 1);
    color: var(--purple);
    text-align: center;
    padding: 10%;
}

.after-timeline {
    padding: 5rem 2rem;
}

.cultural-spotlights-title {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 2);
    color: var(--purple);
    padding-bottom: 3rem;
}

.cultural-spotlights {
    width: 75vw;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.cultural-spotlights p {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--purple);
    text-align: center;
    font-size: calc(var(--body-font));
}

.two-spirit {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.two-spirit img {
    width: 40%;
    height: 40%;
}

.two-spirit-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
}

.two-spirit-text h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 1.5);
    color: var(--purple);
    text-align: center;
}

.sekrata {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 0;
}

.sekrata img {
    width: 20%;
    height: 20%;
}

.sekrata-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
}

.sekrata-text h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 1.5);
    color: var(--purple);
    text-align: center;
}

.background-stripe {
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 80%);
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    height: 45vh;
    width: 100vw;
    left: 0;
    z-index: -1;
}

.hijra {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hijra img {
    width: 35%;
    height: 35%;
}

.hijra-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
}

.hijra-text h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--body-font) * 1.5);
    color: var(--purple);
    text-align: center;
}

@media screen and (max-width: 32em) {
    .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}