.segment-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
    gap: 3rem;
}

.segment-item {

    display: flex;
    flex-direction: column;

}

.segment-item.out-view {
    transform: translateY(100px) scale(1.00);
    transition: all 0.6s cubic-bezier(0.12, 0, 0.39, 0);
}

.segment-item.in-view {
    transform: translateY(0) scale(1);
    transition: all 0.6s cubic-bezier(0.61, 1, 0.88, 1);
}

.segment-item .container {

    border-radius: 2px;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    max-width: 100%;
    /* Shadow only downwards */
    overflow: hidden;
    /* background: linear-gradient(135deg, #1a1a2e 0%, var(--color-blue) 100%); */
    background-color: black;


}

.segment-item--reverse .container {

    background-color: black;
}

.segment-item .hero {

    flex: 1 1 0;
    aspect-ratio: 1 / 1;

    align-items: stretch;
    background: var(--color-dark);
    /* border-radius: 4px; */
    /* Remove height: 100%; to allow hero to match content height */
    z-index: 0;
}



.segment-item__content {
    justify-content: flex-start;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 850px;
    display: flex;
    vertical-align: top;
    text-align: auto;

    color: var(--font-color-light);
    /* Remove height: 100%; to allow content to grow naturally */
    box-sizing: border-box;

}

.segment-item__deliveries {
    color: var(--font-color-accent-1);
    width: 100%;
    max-width: 700px;
    margin-top: 2rem;
    /* Remove padding reset to allow inner spacing */
    background: none;
    box-shadow: none;
    border: none;
}



.segment-item__deliveries .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 1rem;
    /* Optional: space between columns */
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 0;
    min-width: 0;

}



@media (max-width: 899px) {
    .segment-item .container {
        flex-direction: column;
    }


    .segment-item__content {
        width: 100%;
        margin: 0;
        padding: 1rem 2rem 3rem 2rem;
    }

    .segment-item__columns {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (min-width: 900px) {

    .segment-item__content {
        padding: 1rem 2rem 3rem 2rem;
    }

    .segment-item--reverse .container {
        flex-direction: row-reverse !important;
    }
}


@media (min-width: 1300px) {

    .segment-item {
        /* max-width: 90%;
        margin-left: 10%;
        margin-right: 0%; */
    }

    .segment-item--reverse {
        /* margin-right: 10%;
        max-width: 90%;
        margin-left: 0%; */
    }

    .segment-item .hero {
        aspect-ratio: 16 / 9;
        transition: all 0.6s var(--ease-InOutSine);
        min-width: 60%;
    }


    /* .segment-item .hero:hover {
        min-width: 80%;
    } */

    .segment-item__content {
        /* min-width: 700px; */
        padding: 3rem 4rem 3rem 4rem;
        box-sizing: content-box;
    }

    .segment-item--reverse .segment-item__content {
        padding: 3rem 4rem 3rem 4rem;
    }
}



.segment-item h1 {
    margin: 0;
    margin-bottom: 1rem;
    weight: 700;
}

.segment-item h2 {
    margin: 0;
    padding: 0;
}

.segment-item h3 {
    margin: 0;
    padding: 0;

}

.segment-item__deliveries h3 {

    padding: 0 0 1rem 0;
}

.segment-item__deliveries small {

    padding: 0 0 1rem 0;
}

.segment-item__delivery {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    justify-content: flex-end;
    align-items: flex-start;
}


/* Move this rule out of the .spacer block so it applies globally */


.segment-item__delivery .divider {
    height: 1px;
    width: 100%;
    background-color: var(--font-color-light, #fff);
    opacity: 0.25;
    border: none;
    margin: 0.5rem 0 0.5rem 0;
    padding: 0;
    display: block;
}

.segment-item__delivery p {

    margin-bottom: 0.5rem;
}

/* Effects and state classes */

.segment-item .in-view {
    /* Tells the scroll script to apply in and out view classes */
    transition: all 0.6s cubic-bezier(0.61, 1, 0.88, 1);
    transform: translateY(0);
    opacity: 1;
}

.segment-item .out-view {
    transition: all 0.6s cubic-bezier(0.12, 0, 0.39, 0);
    transform: translateY(130px);
    opacity: 0.0;
}

.segment-item.out-view .segment-item__hero {
    /* Tells the scroll script to apply in and out view classes */
    transition: all 0.6s ease-in-out;
    opacity: 0.25;
}

.segment-item.in-view .segment-item__hero {
    /* Tells the scroll script to apply in and out view classes */
    transition: all 0.6s ease-in-out;
    opacity: 1;
}

/* .segment-item--reverse {
    flex-direction: row-reverse;
} */