#main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 37.5rem));
  align-content: start;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw, 1.25rem);
  min-height: calc(100dvh - var(--site-header-height, 4.25rem));
  padding: calc(var(--site-header-height, 4.25rem) + clamp(1rem, 3vw, 2rem)) clamp(1rem, 3vw, 2rem) var(--site-footer-safe-space, clamp(3rem, 7vw, 5rem));
}

#main-content .tile {
  position: relative;
  display: flex;
  width: 100%;
  height: 12.5rem;
  overflow: hidden;
  color: white;
  text-decoration: none;
  background-color: black;
  border-radius: 0.625rem;
  transition: transform 0.24s ease;
  -webkit-tap-highlight-color: transparent;
}

#main-content .tile:hover,
#main-content .tile:focus-visible {
  transform: translateY(-2px);
}

#main-content .inner-tile {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-clip: padding-box;
  border: 0.125rem solid transparent;
  border-radius: inherit;
  transition: border 0.3s ease;
}

#main-content .tile:hover .inner-tile,
#main-content .tile:focus-visible .inner-tile {
  border-color: white;
}

#main-content .image {
  flex: 1;
  min-width: 38%;
  background-position: center;
  background-size: cover;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

#main-content .content {
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(0.9rem, 2.5vw, 1.25rem);
  text-align: left;
}

#main-content .content h3 {
  margin: 0 0 0.625rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.2;
}

#main-content .content p {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.3125rem 0;
  color: lightgray;
  line-height: 1.35;
}

#main-content .content p i {
  flex: 0 0 auto;
}

#main-content .tile:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

@media (max-width: 44rem), (orientation: portrait) {
  #main-content {
    grid-template-columns: 1fr;
    gap: clamp(0.8rem, 4vw, 1rem);
    padding: calc(var(--site-header-height, 4.25rem) + clamp(0.9rem, 4.5vw, 1.25rem)) clamp(0.9rem, 4.5vw, 1.25rem) var(--site-footer-safe-space, clamp(2.25rem, 8vw, 3.5rem));
  }

  #main-content .tile {
    height: auto;
    min-height: 0;
  }

  #main-content .inner-tile {
    flex-direction: column;
  }

  #main-content .image {
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
  }

  #main-content .content {
    align-items: center;
    padding: clamp(0.8rem, 4vw, 1rem);
    text-align: center;
  }

  #main-content .content p {
    justify-content: center;
  }
}

@media (max-width: 24rem) {
  #main-content .content p {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .tile,
  #main-content .inner-tile {
    transition: none;
  }
}