.oat-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 120px;
}

@media (max-width: 860px) {
  .oat-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }
}

.oat-hero__text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.oat-hero__slider {
  position: relative;
  height: 320px;
}

.oat-hero__slider .oat-hero__slid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.oat-hero__slider .oat-hero__slid.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.oat-hero__slid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 320px;
  border-radius: var(--R-medium, 24px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--capti-color--white);
  padding: 24px;
  cursor: pointer;
}

.oat-hero__slid--Sara-Henschjell {
  background-image: linear-gradient(180deg, rgb(10 80 161 / 53%) 0%, rgb(139 78 161 / 53%) 100%),
    url('/capti-site/themes/capti/new/images/people/testimonials/Sara_Henschell.jpg');
}

.oat-hero__slid--Jenna-Osborn {
  background-image: linear-gradient(180deg, rgb(10 80 161 / 53%) 0%, rgb(139 78 161 / 53%) 100%),
    url('/capti-site/themes/capti/new/images/people/testimonials/Jenna_Osborn.jpg');
}

.oat-hero__slid--Kate-Leo {
  background-image: linear-gradient(180deg, rgb(10 80 161 / 53%) 0%, rgb(139 78 161 / 53%) 100%),
    url('/capti-site/themes/capti/new/images/people/testimonials/Kate_Leo.jpg');
}

.oat-hero__slid q {
  color: var(--capti-color--white);
  padding: 0;
}

.oat-hero__slid-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.oat-hero__slid-footer-autor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oat-hero__slid-footer-autor p.button-m,
.oat-hero__slid-footer-autor p.body-m {
  color: var(--capti-color--white);
  padding: 0;
  margin: 0;
}

.oat-sessions {
  display: grid;
  grid-template-columns: 25fr 22fr 22fr;
  grid-template-rows: auto;
  grid-template-areas:
    "overview overview    format"
    "audience  participant participant";
  gap: 16px;
  margin-top: 120px;
  margin-bottom: 120px;
  position: relative;
}

@media (max-width: 1150px) {
  .oat-sessions {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .oat-sessions {
    margin-top: 80px;
    grid-template-areas: "overview"
      "format"
      "audience"
      "participant";
  }
}

.oat-session--overview {
  grid-area: overview;
}

.oat-session--format {
  grid-area: format;
}

.oat-session--audience {
  grid-area: audience;
}

.oat-session--participant {
  grid-area: participant;
}

.oat-session-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--capti-color--outline-medium);
  overflow: hidden;
}

.oat-session-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.oat-session-card__title {
  margin: 0;
  padding: 0;
  font-size: var(--capti-typography--h3-font-size);
  line-height: var(--capti-typography--h3-line-height);
  font-weight: var(--capti-typography--h3-font-weight);
}

@media (max-width: 750px) {
  .oat-session-card__title {
    font-size: var(--capti-typography--h3-font-size);
    font-size: var(--capti-typography--h4-font-size--mobile);
    line-height: var(--capti-typography--h4-line-height--mobile);
    font-weight: var(--capti-typography--h4-font-weight--mobile);
  }
}

.oat-session--overview .spot {
  position: absolute;
  z-index: -1;
  height: 600px;
  width: 600px;
  top: -200px;
  left: -300px;
  transform: rotate(135deg);
}

.oat-session--audience .spot {
  position: absolute;
  z-index: -1;
  height: 500px;
  width: 500px;
  bottom: -250px;
  left: -60px;
  transform: rotate(100deg);
}

@media (max-width: 1150px) {
  .oat-session--audience .spot {
    position: absolute;
    z-index: -1;
    height: 500px;
    width: 500px;
    bottom: 1250px;
    left: -60px;
    transform: rotate(100deg);
  }
}

.oat-session--audience .session-card__body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.oat-session--participant .spot {
  position: absolute;
  z-index: -1;
  height: auto;
  width: 600px;
  bottom: -250px;
  right: -150px;
  transform: rotate(91deg);
}

@media (max-width: 1150px) {
  .oat-session--participant .spot {
    position: absolute;
    z-index: -1;
    height: auto;
    width: 600px;
    bottom: -250px;
    right: -300px;
    transform: rotate(91deg);
  }
}

.oat-session--participant .oat-session-card__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.oat-session--participant ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (max-width: 700px) {
  .oat-session--participant ul {
    gap: 16px;
  }
}