.nearby-fairs {
  margin: 2rem 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid #d3e4e8;
  border-radius: 28px;
  background: linear-gradient(135deg, #eef7f5, #f4f7fb);
  color: #123f58;
}
.nearby-fairs[hidden] { display: none; }
.nearby-fairs > h2 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.nearby-fairs > p { margin: 0 0 1.5rem; color: #425b65; }
.nearby-fairs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.nearby-fair {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #cadde0;
  border-inline-start: 4px solid #28756e;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px #143f5510;
}
.nearby-fair h3 { margin: .8rem 0; font-size: 1.12rem; line-height: 1.35; text-align: start; }
.nearby-fair p { font-size: .9rem; line-height: 1.55; margin: .4rem 0; text-align: start; }
.nearby-fair .nearby-fair__date {
  color: #155b55;
  font-weight: 700;
  font-size: .82rem;
  padding: .5rem .65rem;
  border-radius: 7px;
  background: #eaf5f0;
}
.nearby-fair__place { color: #48616a; }
.nearby-fair a { color: #124b70; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.nearby-fair a:hover { color: #006f70; }
.nearby-fair a:focus-visible { outline: 3px solid #007c83; outline-offset: 4px; border-radius: 3px; }
.nearby-fair__more { margin-top: auto; padding-top: 1rem; font-weight: 700; }
.nearby-fair .nearby-fair__more { margin-top: auto; }
.nearby-fair__more a { display: inline-block; padding-block: .45rem; }
.nearby-fair:focus-within { border-color: #28756e; box-shadow: 0 8px 24px #143f5520; }
.latest-added-fairs {
  margin: 2rem 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid #e1d3ad;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff7df, #f7efe4);
  color: #55401d;
}
.latest-added-fairs[hidden] { display: none; }
.latest-added-fairs > h2 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.latest-added-fairs > p { margin: 0 0 1.5rem; color: #6b5837; }
.latest-added-fairs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.latest-added-fair {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e4d4ad;
  border-inline-start: 4px solid #a66b25;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 8px 22px #61431512;
}
.latest-added-fair h3 { margin: .8rem 0; font-size: 1.12rem; line-height: 1.35; text-align: start; }
.latest-added-fair p { font-size: .9rem; line-height: 1.55; margin: .4rem 0; text-align: start; }
.latest-added-fair__date {
  color: #7b4c13;
  font-weight: 700;
  font-size: .82rem;
  padding: .5rem .65rem;
  border-radius: 7px;
  background: #f9edce;
}
.latest-added-fair__place { color: #6b5837; }
.latest-added-fair a { color: #704512; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.latest-added-fair a:hover { color: #8b4f08; }
.latest-added-fair a:focus-visible { outline: 3px solid #a66b25; outline-offset: 4px; border-radius: 3px; }
.latest-added-fair__more { margin-top: auto; padding-top: 1rem; font-weight: 700; }
.latest-added-fair:focus-within { border-color: #a66b25; box-shadow: 0 8px 24px #61431522; }
@media (max-width: 1000px) {
  .nearby-fairs__grid,
  .latest-added-fairs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .nearby-fairs__grid,
  .latest-added-fairs__grid { grid-template-columns: minmax(0, 1fr); }
  .nearby-fair,
  .latest-added-fair { padding: 1.15rem; }
}