/* Home mode catalogue: a scalable grid independent of card order. */
.section-note {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #6f8b8d;
  padding-bottom: 5px;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 17px;
}

.mode-card {
  grid-column: span 3;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 25px #17364012;
}

.mode-card.feature { grid-column: span 6; }
.landmark-card { grid-column: span 5; }
.capitals-card { grid-column: span 3; }

.spain-card {
  grid-column: span 4;
  min-height: 355px;
}

.spain-visual {
  position: relative;
  inset: auto;
  height: 166px;
}

.spain-card .card-content {
  margin-left: 0;
  padding: 18px 19px;
}

.spain-card .card-content h3 { font-size: 23px; }

.communities-card { grid-column: span 4; }
.communities-visual { background: #e4efec; }
.communities-visual::before {
  content: '';
  position: absolute;
  width: 188px;
  height: 104px;
  left: calc(50% - 94px);
  top: 27px;
  background: #f7f4eb;
  clip-path: polygon(0 22%,20% 10%,45% 20%,62% 0,88% 23%,100% 57%,79% 93%,45% 100%,12% 78%);
}
.communities-visual::after { content: ''; position: absolute; inset: 28px 25% 25px; background: repeating-linear-gradient(90deg, transparent 0 25px, #79a5a222 26px 27px), repeating-linear-gradient(0deg, transparent 0 18px, #79a5a222 19px 20px); }
.communities-visual span { position: absolute; z-index: 2; left: 24px; bottom: 18px; font-family: Fraunces, serif; font-size: 35px; color: #347783; }
.communities-visual i { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: #ff8067; }
.communities-visual i:nth-child(2) { left: 42%; top: 43%; }.communities-visual i:nth-child(3) { left: 57%; top: 38%; }.communities-visual i:nth-child(4) { left: 51%; top: 63%; }.communities-visual i:nth-child(5) { left: 35%; top: 57%; }

.usa-card { grid-column: span 4; }
.usa-visual { background: #e8eff2; }
.usa-visual::before { content: ''; position: absolute; width: 190px; height: 94px; left: calc(50% - 95px); top: 36px; background: #f7f4eb; clip-path: polygon(0 30%,15% 15%,34% 20%,48% 0,68% 13%,88% 10%,100% 44%,87% 76%,64% 80%,48% 100%,23% 84%,8% 67%); }
.usa-visual::after { content: ''; position: absolute; inset: 42px 25% 29px; background: repeating-linear-gradient(90deg, transparent 0 18px, #5f91a622 19px 20px), repeating-linear-gradient(0deg, transparent 0 14px, #5f91a622 15px 16px); }
.usa-visual span { position: absolute; z-index: 2; left: 24px; bottom: 18px; font-family: Fraunces, serif; font-size: 35px; color: #347783; }
.usa-visual i { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: #ff8067; }.usa-visual i:nth-child(2) { left: 40%; top: 49%; }.usa-visual i:nth-child(3) { left: 58%; top: 42%; }.usa-visual i:nth-child(4) { left: 73%; top: 62%; }

@media (max-width: 1000px) and (min-width: 801px) {
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-card,
  .mode-card.feature,
  .landmark-card,
  .capitals-card,
  .spain-card,
  .communities-card,
  .usa-card { grid-column: auto; }
  .mode-card.feature,
  .spain-card { grid-column: span 2; }
}

@media (max-width: 800px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card,
  .mode-card.feature,
  .landmark-card,
  .capitals-card,
  .spain-card,
  .communities-card,
  .usa-card { grid-column: auto; }
  .spain-visual { height: 180px; }
  .spain-card .card-content { margin-left: 0; padding: 18px 19px; }
}

@media (max-width: 430px) {
  .section-note { display: inline-block; margin-top: 16px; }
  .spain-visual { height: 150px; }
}