.how-to-study__layout {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .how-to-study__layout {
    padding-inline: var(--section-padding-x-mobile);
  }
}

.how-to-study__cards {
  display: flex;
  flex-direction: column;

  gap: 12px;
  margin-top: var(--section-name-to-section);
}

.how-to-study__card {
  display: flex;

  align-items: stretch;
}

.how-to-study__number {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 9px;
  flex: 0 0 auto;
}

.how-to-study__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: clamp(44.235px, calc(33.105px + 1.59257vw), 56px);
  height: clamp(44.235px, calc(33.105px + 1.59257vw), 56px);
  border-radius: 50%;
  background: var(--color-cards-bg);
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: var(--font-size-number-badge);
  color: var(--color-text);
}

.how-to-study__card:last-child .how-to-study__line {
  visibility: hidden;
}

.how-to-study__line {
  /* 1 1 0, never auto: auto falls back to the SVG's intrinsic height and
     pins every card to a flat height. */
  flex: 1 1 0;
  min-height: 0;
  width: 2px;
  overflow: hidden;
}
.how-to-study__line img {
  display: block;
  width: 100%;
  height: 100%;
}

.how-to-study__box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;

  gap: clamp(30px, calc(1.622px + 4.05405vw), 60px);
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  overflow: hidden;

  --htp-frame-inset: clamp(0px, calc(-11.351px + 1.62162vw), 12px);
}
@media (max-width: 988px) {
  .how-to-study__box {
    border-radius: var(--radius-medium-mobile);
  }
}

.how-to-study__media {
  flex: 0 0 auto;
  height: clamp(182.59283px, calc(76.262px + 15.19016vw), 295px);
  aspect-ratio: 494 / 295;

  margin: var(--htp-frame-inset);
  border-radius: 16px;
  overflow: hidden;
}
.how-to-study__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-to-study__text {
  display: flex;
  flex-direction: column;
  gap: 15px;

  box-sizing: content-box;

  font-size: var(--font-size-body-card-l);
  flex: 0 1 31.8ch;
  min-width: 245.765625px;

  padding: 30px 30px 30px 0;
}

.how-to-study__card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h3-card-l);
  line-height: 0.95;
  color: var(--color-text);
}

.how-to-study__card-body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-l);
  line-height: 1.3;
  color: var(--color-text);
}

@media (max-width: 695.75px) {
  .how-to-study__box {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .how-to-study__media {
    flex: 0 0 auto;
    width: 100%;

    height: auto;

    aspect-ratio: 306 / 174;
    margin: 0;
  }
  .how-to-study__text {
    flex: 1 1 auto;
    /* Stretched, never 100%: the box is content-box, so 100% + padding
       overflowed the card. */
    width: auto;

    max-width: 31.8ch;
    min-width: 0;
    gap: 12px;
    padding: 30px;
  }
}