.our-story {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--color-palm-green, #123);
    border-radius: 0;
    padding: 8rem;
    margin-inline: 4rem;
    gap: 0.5rem;

    @media (max-width: 1023px) {
        padding: 2rem;
        margin-inline: 2rem;
    }
}

.our-story.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--story-bg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

.our-story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .75));
    pointer-events: none;
}

.our-story > * {
    position: relative;
    z-index: 1;
}

.our-story .title {
    color: var(--color-sea-salt-white, #fff);
    text-transform: uppercase;
}

.our-story p {
    max-width: 60%;
    color: var(--color-sea-salt-white, #fff);

    @media (max-width: 1023px) {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .our-story.has-bg::before {
        transform: none !important;
    }
}