/* Shared Picture Words layout. Beginner Speaking is the visual reference. */
.lesson {
  max-width: 1080px !important;
}

.word-grid,
.words,
.cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 15px !important;
}

.word,
.word-card {
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #d8e8eb !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px #17324d12 !important;
}

.picture,
.word-picture,
.word-icon {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  background-size: 300% 200% !important;
  background-repeat: no-repeat !important;
  background-color: #eef7f7 !important;
}

.word footer,
.word-card footer {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 13px !important;
  color: #00899a !important;
}

.word footer strong,
.word-card footer strong {
  color: #00899a !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}

.word footer button,
.word-card footer button,
.word-audio {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: auto !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #edf6f7 !important;
  color: #17324d !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.word footer button:hover,
.word-card footer button:hover,
.word-audio:hover {
  background: #dfeef0 !important;
}

@media (max-width: 760px) {
  .word-grid,
  .words,
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .word footer,
  .word-card footer {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  .word footer strong,
  .word-card footer strong {
    font-size: 16px !important;
  }
}