/* Block 11: parents' peace of mind is part of the program. */
.gd37-safety {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  color: var(--gd37-ink);
  background: var(--gd37-paper);
}

.gd37-safety__top-wave {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 220px;
}

.gd37-safety__inner {
  position: relative;
  z-index: 2;
  padding-top: 61px;
}

.gd37-safety__header {
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(440px, .77fr);
  align-items: start;
  gap: 76px;
}

.gd37-safety__header > * { min-width: 0; }

.gd37-safety__kicker {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.gd37-safety__kicker span {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gd37-green);
}

.gd37-safety__title {
  margin: 0;
  font-family: "Adigiana 2", cursive;
  font-size: clamp(45px, 3.9vw, 56px);
  font-weight: 400;
  line-height: 1.08;
}

.gd37-safety__title span { color: var(--gd37-orange-strong); }

.gd37-safety__underline {
  display: block;
  width: 422px;
  max-width: 90%;
  height: 14px;
  margin-top: 2px;
  border-bottom: 6px solid var(--gd37-yellow);
  border-radius: 0 0 68% 48%;
  transform: rotate(-.7deg);
}

.gd37-safety__intro {
  margin-top: 10px;
}

.gd37-safety__intro strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
}

.gd37-safety__intro p {
  margin: 11px 0 0;
  color: #426f66;
  font-size: 16px;
  line-height: 1.7;
}

.gd37-safety__content {
  display: grid;
  grid-template-columns: minmax(0, 805px) minmax(0, 1fr);
  align-items: start;
  gap: 31px;
  margin-top: 11px;
}

.gd37-safety-photos {
  position: relative;
  height: 505px;
}

.gd37-safety-photo {
  --safety-accent: var(--gd37-blue);
  --safety-outer-mask: none;
  --safety-inner-mask: none;
  position: absolute;
  margin: 0;
}

.gd37-safety-photo__frame,
.gd37-safety-photo__media {
  position: absolute;
  inset: 0;
}

.gd37-safety-photo__frame {
  z-index: 0;
  background: var(--safety-accent);
  -webkit-mask: var(--safety-outer-mask) center / 100% 100% no-repeat;
  mask: var(--safety-outer-mask) center / 100% 100% no-repeat;
}

.gd37-safety-photo__media {
  z-index: 1;
  overflow: hidden;
  background: #d9e5df;
  -webkit-mask: var(--safety-inner-mask) center / 100% 100% no-repeat;
  mask: var(--safety-inner-mask) center / 100% 100% no-repeat;
}

.gd37-safety-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gd37-safety-photo--territory {
  --safety-outer-mask: url("masks/safety-territory-outer.svg");
  --safety-inner-mask: url("masks/safety-territory-inner.svg");
  top: 0;
  left: -13px;
  width: 805px;
  height: 491px;
}

.gd37-safety-photo--territory .gd37-safety-photo__media img {
  object-position: center 49%;
}

.gd37-safety-photo__shine {
  position: absolute;
  top: 20px;
  left: 28px;
  z-index: 2;
  width: 110px;
  height: 58px;
}

.gd37-safety-photo--territory figcaption {
  position: absolute;
  right: 183px;
  bottom: 26px;
  left: 24px;
  z-index: 3;
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 34px;
  border-radius: 50% 50% 44% 56% / 37% 48% 52% 63%;
  background: rgba(255, 253, 248, .93);
}

.gd37-safety-photo--territory figcaption strong {
  font-family: "Adigiana 2", cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.05;
}

.gd37-safety-photo--territory figcaption span {
  margin-top: 16px;
  color: #426f66;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.gd37-safety-photo--shelter {
  --safety-accent: var(--gd37-yellow);
  --safety-outer-mask: url("masks/safety-shelter-outer.svg");
  --safety-inner-mask: url("masks/safety-shelter-inner.svg");
  right: -65px;
  bottom: -3px;
  z-index: 4;
  width: 324px;
  height: 268px;
}

.gd37-safety-photo--shelter .gd37-safety-photo__media img {
  object-position: center;
}

.gd37-safety-photo--shelter figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 14px;
  z-index: 3;
  min-height: 59px;
  padding: 20px 28px 12px;
  border-radius: 50% 50% 45% 55% / 42% 50% 50% 58%;
  color: #d99100;
  background: rgba(255, 253, 248, .92);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gd37-safety-checklist {
  position: relative;
  min-height: 466px;
  margin-top: 2px;
  padding: 62px 37px 35px;
  border-radius: 51% 49% 45% 55% / 11% 12% 10% 13%;
  background: #eef7e9;
}

.gd37-safety-checklist__line {
  position: absolute;
  top: 38px;
  right: 68px;
  left: 29px;
  height: 29px;
  border-top: 5px solid var(--gd37-green);
  border-radius: 52% 48% 0 0 / 100% 100% 0 0;
  transform: rotate(1.7deg);
}

.gd37-safety-checklist h3 {
  margin: 0 0 25px;
  font-family: "Adigiana 2", cursive;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
}

.gd37-safety-checklist__group + .gd37-safety-checklist__group {
  margin-top: 29px;
}

.gd37-safety-checklist__group > strong {
  color: #1499b2;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.gd37-safety-checklist__group--health > strong { color: #d99100; }
.gd37-safety-checklist__group--walks > strong { color: #5a9f2a; }

.gd37-safety-checklist ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.gd37-safety-checklist li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.gd37-safety-checklist li + li { margin-top: 4px; }

.gd37-safety-checklist li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gd37-blue);
  content: "";
}

.gd37-safety-checklist__group--health li::before { background: var(--gd37-yellow); }
.gd37-safety-checklist__group--walks li::before { background: var(--gd37-green); }

.gd37-safety__blue-rays {
  position: absolute;
  top: 142px;
  left: calc(50% + 90px);
  z-index: 3;
  width: 95px;
  height: 100px;
}

.gd37-safety__orange-rays {
  position: absolute;
  right: 22px;
  bottom: 57px;
  z-index: 2;
  width: 135px;
  height: 80px;
}

.gd37-safety__dot {
  position: absolute;
  right: 60px;
  bottom: 130px;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gd37-green);
}

.gd37-safety__bottom-wave {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 80px;
}

@media (max-width: 1220px) {
  .gd37-safety__content {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
    gap: 20px;
  }

  .gd37-safety-photo--territory {
    width: 100%;
  }

  .gd37-safety-photo--shelter {
    right: -45px;
  }

  .gd37-safety-checklist {
    padding-inline: 29px;
  }
}

@media (max-width: 900px) {
  .gd37-safety {
    min-height: 0;
    padding-bottom: 58px;
  }

  .gd37-safety__header {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gd37-safety__intro {
    margin-top: 18px;
  }

  .gd37-safety__content {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 24px;
  }

  .gd37-safety-photos {
    height: auto;
  }

  .gd37-safety-photo {
    position: relative;
  }

  .gd37-safety-photo--territory {
    top: auto;
    left: auto;
    height: auto;
    aspect-ratio: 835 / 510;
  }

  .gd37-safety-photo--shelter {
    right: auto;
    bottom: auto;
    width: 48%;
    height: auto;
    aspect-ratio: 350 / 290;
    margin: -40px 0 0 auto;
  }

  .gd37-safety-checklist {
    min-height: 0;
    margin-top: 0;
  }

  .gd37-safety__blue-rays,
  .gd37-safety__orange-rays,
  .gd37-safety__dot { display: none; }
}

@media (max-width: 700px) {
  .gd37-safety {
    padding-bottom: 44px;
  }

  .gd37-safety__top-wave {
    height: 180px;
  }

  .gd37-safety__inner {
    padding-top: 50px;
  }

  .gd37-safety__kicker {
    margin-bottom: 10px;
    font-size: 9px;
  }

  .gd37-safety__title {
    font-size: clamp(32px, 9.2vw, 39px);
    line-height: 1.05;
  }

  .gd37-safety__title span { display: block; }

  .gd37-safety__underline {
    width: 62%;
    height: 9px;
    margin-top: 1px;
    border-bottom-width: 3px;
  }

  .gd37-safety__intro {
    margin-top: 15px;
  }

  .gd37-safety__intro strong {
    font-size: 14px;
    line-height: 1.45;
  }

  .gd37-safety__intro p {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.55;
  }

  .gd37-safety__content {
    gap: 20px;
    margin-top: 18px;
  }

  .gd37-safety-photo--territory figcaption {
    right: 12px;
    bottom: 8px;
    left: 12px;
    min-height: 76px;
    padding: 11px 20px;
    border-radius: 31px 35px 30px 37px;
  }

  .gd37-safety-photo--territory figcaption strong {
    font-size: 20px;
  }

  .gd37-safety-photo--territory figcaption span {
    margin-top: 7px;
    font-size: 7px;
  }

  .gd37-safety-photo__shine {
    top: 10px;
    left: 16px;
    width: 72px;
    height: 38px;
  }

  .gd37-safety-photo--shelter {
    width: 61%;
    margin-top: -24px;
  }

  .gd37-safety-photo--shelter figcaption {
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 44px;
    padding: 15px 18px 8px;
    font-size: 9px;
  }

  .gd37-safety-checklist {
    padding: 39px 20px 25px;
    border-radius: 31px 38px 33px 41px;
  }

  .gd37-safety-checklist__line {
    top: 22px;
    right: 37px;
    left: 19px;
    height: 18px;
    border-top-width: 3px;
  }

  .gd37-safety-checklist h3 {
    margin-bottom: 19px;
    font-size: 25px;
  }

  .gd37-safety-checklist__group + .gd37-safety-checklist__group {
    margin-top: 20px;
  }

  .gd37-safety-checklist__group > strong {
    font-size: 9px;
  }

  .gd37-safety-checklist ul {
    margin-top: 9px;
  }

  .gd37-safety-checklist li {
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.55;
  }

  .gd37-safety-checklist li::before {
    top: .55em;
    width: 8px;
    height: 8px;
  }

  .gd37-safety__bottom-wave {
    height: 50px;
  }
}

@media (max-width: 380px) {
  .gd37-safety-photo--territory figcaption strong { font-size: 18px; }
  .gd37-safety-photo--shelter { width: 64%; }
}