.learn-more {
  padding-block: var(--section-padding);
  background: radial-gradient(ellipse 50% 80% at -5% 50%, oklch(from var(--primary-100) l c h/0.35) 0%, transparent 60%), radial-gradient(ellipse 45% 70% at 105% 50%, oklch(from var(--warning-100) l c h/0.4) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 50% 100%, oklch(from var(--warning-100) l c h/0.25) 0%, transparent 55%), var(--bg-base);
}
.learn-more .is-hgroup {
  margin-block-end: 3.5rem;
}

.learn-more__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 63.98rem) {
  .learn-more__body {
    gap: 3rem;
  }
}
@media (max-width: 47.98rem) {
  .learn-more__body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.learn-more__article h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--neutral-950);
  margin: 0;
  margin-block-end: 1rem;
}
.learn-more__article p {
  font-size: var(--font-size-base);
  color: var(--neutral-600);
  line-height: 1.72;
  margin: 0;
  margin-block-end: 1.5rem;
}
.learn-more__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-950);
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .learn-more__read-more:hover {
    color: var(--primary-500);
  }
}
.learn-more__collage {
  position: relative;
}

.learn-more__photo {
  position: absolute;
  border-radius: 1.125rem;
  overflow: hidden;
  box-shadow: 0 8px 32px oklch(from var(--neutral-950) l c h/0.16);
}
.learn-more__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.learn-more__photo--1 {
  inset-block-start: 0;
  inset-inline-end: 5%;
  width: 42%;
  height: 55%;
  transform: rotate(1.5deg);
  z-index: 1;
}
.learn-more__photo--2 {
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 42%;
  height: 52%;
  transform: rotate(1deg);
  z-index: 1;
}
.learn-more__photo--3 {
  inset-block-start: 10%;
  inset-inline-start: 0;
  width: 50%;
  height: 68%;
  transform: rotate(-1deg);
  z-index: 2;
}
.learn-more__badge {
  position: absolute;
  inset-inline-start: calc(50% - 1.75rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary-400);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px oklch(from var(--primary-500) l c h/0.45);
}
.learn-more__badge img {
  width: 1.875rem;
  height: auto;
  display: block;
}