.course-offers .recorded-home-offer {
  grid-template-rows: auto auto auto auto;
  gap: 20px;
  min-width: 0;
}

.course-offers .recorded-home-offer > p {
  grid-row: 1 / 5;
}

.recorded-home-offer > h3,
.recorded-home-offer > .recorded-home-preview,
.recorded-home-offer > .recorded-home-copy,
.recorded-home-offer > .recorded-home-browse {
  grid-column: 2;
  min-width: 0;
}

.course-offers .recorded-home-offer h3 {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
}

.recorded-home-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.95;
  margin: 2px 0 4px;
  isolation: isolate;
}

.recorded-home-cover {
  position: absolute;
  display: block;
  width: 58%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: 0 10px 18px -10px rgba(24, 62, 49, .35), 0 2px 4px rgba(24, 62, 49, .1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.recorded-home-cover-back {
  right: 2%;
  top: 3%;
  transform: rotate(4deg);
}

.recorded-home-cover-front {
  left: 2%;
  bottom: 3%;
  transform: rotate(-4deg);
  z-index: 1;
}

.recorded-home-preview:hover .recorded-home-cover-front {
  transform: translateY(-3px) rotate(-3deg);
}

.recorded-home-preview:hover .recorded-home-cover-back {
  transform: translateY(-3px) rotate(3deg);
}

.recorded-home-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: #235948;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
}

.recorded-home-topics span {
  padding-left: 10px;
  border-left: 3px solid #bb638a;
}

.recorded-home-topics span + span { border-left-color: #ba963c; }

.recorded-home-copy > p {
  max-width: 440px;
  margin: 12px 0 0;
  color: #526b60;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
}

.recorded-home-browse {
  justify-self: start;
  gap: 20px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.recorded-home-browse > [aria-hidden] { font-size: 22px; font-weight: 500; }
.recorded-home-preview:focus-visible,
.recorded-home-browse:focus-visible { outline: 3px solid #b48a2e; outline-offset: 6px; }

@media (min-width: 761px) and (max-width: 1100px) {
  .course-offers .recorded-home-offer { padding-inline: 26px 0; grid-template-columns: 24px minmax(0, 1fr); gap: 18px 12px; }
  .course-offers .recorded-home-offer h3 { font-size: 26px; }
}

@media (max-width: 760px) {
  .course-offers .recorded-home-offer { grid-template-columns: 24px minmax(0, 1fr); gap: 18px 14px; padding-inline: 0; }
  .course-offers .recorded-home-offer h3 { font-size: 28px; }
  .recorded-home-offer > .recorded-home-preview { grid-column: 1 / -1; max-width: 510px; margin-block: 8px; justify-self: center; }
  .course-offers .recorded-home-offer > p { grid-row: 1; }
  .recorded-home-offer > .recorded-home-copy,
  .recorded-home-offer > .recorded-home-browse { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .course-offers .recorded-home-offer h3 { font-size: 25px; }
  .recorded-home-cover { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .recorded-home-cover { transition: none; }
  .recorded-home-preview:hover .recorded-home-cover-front { transform: rotate(-4deg); }
  .recorded-home-preview:hover .recorded-home-cover-back { transform: rotate(4deg); }
}