.destinations{
    width: 100vw;
    background-color: var(--color-lightbrown);
    text-align: center;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.destinations h1{
    margin-top: 0em;
}

.scrolliconr1{
    color: var(--color-brown);
    font-size: 3em;
}

.destinationslocal,
.destinationssof{
    position: relative;;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 30vw;
    gap: 0rem 6vw;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    width: 78vw;
    margin: auto;
    margin-top: 0;
    padding: 0.5em;
}

.destinationslocal > *,
.destinationssof > *{
    scroll-snap-align: start;
}

.destinationcard{
    background-color: white;
    border: 3px solid var(--color-brown);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.destinationcard h1{
    padding-top: 1rem;
}

.destinationcard p{
    padding: 1rem;
}

.destinationcard img{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}


@media screen and (max-width: 675px) {
    p, 
    .destinations p{
        font-size: var(--highlight-font-size-mobile);
      }
    h1, 
    .destinations h1{
          font-size: var(--title-font-size-mobile);
      }
    

    .destinationslocal,
    .destinationssof{
     grid-auto-columns: 84vw;
    gap: 1rem 30vw;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    width: 85vw;
    margin: auto;
    margin-top: 0em;
}
.destinationcard img{
    aspect-ratio: 16/9;
}

.scrolliconl{
    font-size: 2em;
    right: 0;
}
.scrolliconr{
    font-size: 2em;
}
    }