.hero-section {
    display: flex;
    justify-content: center;
}

.hero {
    width: 100%;
    height: 400px;
    background-image: url("../assets/images/hero-thing-to-do.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero > * {
    z-index: 20;
}

.hero__title {
    font-size: var(--text-7);
    color: var(--white);

    @media (width < 1024px) {
        font-size: var(--text-6);
    }

    @media (width < 640px) {
        font-size: var(--text-5);
    }
}

.sea-section,
.food-section,
.outdoor-section,
.culture-section {
    display: flex;
    justify-content: center;
    align-items: center;
}