/* =================   RESERVING   ==== */
.reserving {
   margin-inline: 2rem;
}

.reserving--container,
.reserving--list {
   display: flex;
   flex-direction: column;
}

.reserving--container {
   align-items: center;
   gap: 2rem;
}

.reserving--container>h2 {
   border-bottom: none;
   /* font-weight: 500; */
   margin: 0;
   text-align: center;
}

.reserving--list>li {
   counter-increment: numbered;
   list-style-position: outside;
   padding: 0.5rem;
}

.reserving--list>li:not(:last-child)::after {
   content: "";
   display: block;
   bottom: 0;
   left: 0;
   right: 0;
   width: 60%;
   margin: 0 auto;
   height: 1px;
   margin-top: 1rem;
   background-color: #ccc;
}

.reserving--list>li::before {
   content: counter(numbered);
   display: inline-block;
   margin-right: 1rem;
   font-size: 1rem;
   font-weight: 600;
   width: 1.7rem;
   height: 1.7rem;
   background-color: var(--color-yellow-prime);
   border-radius: 50%;
   text-align: center;
}

/* ---   35 rem */
@media(min-width: 35rem) {
   .reserving {
      padding: 2rem;
   }
}

/* ---   48 rem */
@media(min-width: 48rem) {
   .reserving {
      padding: 2rem 6rem;
   }
}