beall-greenhouses-market/css/artist.css

.artist {
  width: 100%;
  margin: 1rem 0;
  display: grid;
}

.artist:nth-child(odd) {
  grid-template:
    'imgs h3'
    'imgs desc'
    'imgs .';
  grid-template-columns: 45% auto;
}

.artist:nth-child(even) {
  grid-template:
    'h3 imgs'
    'desc imgs'
    '. imgs';
  grid-template-columns: auto 45%;
}

@media (max-width: 1050px) {
  .artist {
    margin: 1rem 0 3rem;
  }

  .artist:nth-child(n) {
    grid-template:
      'imgs'
      'h3'
      'desc';
  }
}

.fit-contain {
  object-fit: contain;
  grid-area: imgs;
}

.artist img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 1rem;
}

.artist h3 {
  grid-area: h3;
  text-transform: uppercase;
}

.artist:nth-child(odd) h3 {
  padding-left: .5rem;
}

.artist:nth-child(even) h3 {
  padding-right: .5rem;
  text-align: right;
}

.description {
  grid-area: desc;
  background-color: light-dark(var(--color-light-alt), var(--color-dark-alt));
  border-radius: 0 0 1rem 1rem;
}

.artist:nth-child(odd) .description {
  margin-left: 1.75rem;
}

.artist:nth-child(even) .description {
  margin-right: 1.75rem;
}

@media (max-width: 1050px) {
  .artist:nth-child(n) h3 {
    padding: .5rem 0 0;
  }

  .artist:nth-child(odd) .description {
    margin-left: .625rem;
  }

  .artist:nth-child(even) .description {
    margin-right: .625rem;
  }
}

.description p:last-child {
  text-align: center;
}