@media only screen and (min-width: 0rem) {
  .container {
    width: 100%;
    margin: auto;
    max-width: 80rem;
    padding: 0 1rem;
  }
}
@media only screen and (min-width: 48rem) {
  .container {
    width: 100%;
    margin: auto;
    padding: 0 2.5rem;
  }
}

/*-- -------------------------- -->
<---          Location          -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
  .locations {
    padding-top: clamp(4rem, 8vw, 6rem);

    color: var(--bodyTextColor);

    text-align: center;
  }

  .location-title {
    margin: 0;
    font-size: var(--headerFontSize);
  }
  .info {
    min-height: 32rem;
    color: var(--bodyTextColor);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .info-title {
    font-size: var(--headerRegularFontSize);
  }
  .info-text{
   justify-content: center;
    text-decoration: none;
    color: var(--bodyTextColor);
    gap: .5rem;
    display: flex;
    align-items: center;
  }

  #map {
    min-height: 24rem;
    width: 100%;
    order: -1;
  
  }
}

@media only screen and (min-width: 48rem) {
  .info {
    
    color: var(--bodyTextColor);
    text-align: left;
    justify-content: space-around;
    display: flex;
    flex-direction: row-reverse;
    gap: 1.5rem;
  }
  .info-card {
    width: 40%;
  }

  .info-text{
    justify-content: start;
  }
}