.grid {
  display: grid;
}

.center {
    place-content: center;
}

.auto-fit {
  --cell-min: clamp(180px, 25vw, 320px);
  grid-template-columns: repeat(auto-fit, minmax(var(--cell-min), 1fr));
}
.auto-fit-max {
  --cell-min: clamp(180px, 25vw, 320px);
  --cell-max: 320px;

  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--cell-min), var(--cell-max))
  );
}
.auto-fill {
  --cell-min: clamp(180px, 25vw, 320px);

  grid-template-columns: repeat(auto-fill, minmax(var(--cell-min), 1fr));
}

.gap-s {
  gap: 0.2rem;
}
.gap-m {
  gap: 1rem;
}
.gap-l {
  gap: 2rem;
}

.m-0 {
  margin: 0;
}
.p-1 {
  padding: 1rem;
}

.media-text {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;

  & > div {
    display: grid;
    align-items: center;
  }
}

.text-over-media {
  & p {
    width: 20ch;
    font-size: larger;
  }
}

/* ---------- tour dates ---------- */

.tour {
  padding: 1rem;
  background: var(--onyx-2);
}
.tour-list {
  max-width: 900px;
  margin: 0 auto;
}
.tour-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.22);
  padding-block: 0.4rem;
}
.tour-row:first-child {
  border-top: 1px solid rgba(201, 162, 75, 0.22);
}
.tour-date {
  font-family: var(--heading);
  color: var(--gold-bright);
  font-size: 16px;
  text-align: center;
}
.tour-date span {
  display: block;
  font-family: var(--label);
  font-size: 11px;

  color: var(--ivory-dim);
}
.tour-venue h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.tour-venue p {
  color: var(--ivory-dim);
  font-size: 16px;
  margin-top: 0.1rem;
}
.tour-city {
  font-family: var(--label);
  font-size: 12px;

  text-transform: uppercase;
  color: var(--ivory-dim);
}
.tour-row .btn {
  padding: 10px 20px;
  font-size: 11px;
  border: solid 1px var(--ivory-dim);
  width: fit-content;
}



@media screen and (width < 450px) {
    .tour-row {
        grid-template-columns: 1fr;
    }
}
@media screen and (width < 400px) {
  .text-over-media {
    font-size: medium;
  }
}