/* Block 15: traditions and community. */
.gd37-community {
  position: relative;
  min-height: 1050px;
  overflow: hidden;
  color: var(--gd37-ink);
  background: var(--gd37-paper);
}

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

.gd37-community__inner {
  position: relative;
  z-index: 2;
  padding-top: 136px;
  padding-bottom: 35px;
}

.gd37-community__header {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(410px, .82fr);
  align-items: start;
  gap: 78px;
}

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

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

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

.gd37-community__title {
  margin: 0;
  font-family: "Adigiana 2", cursive;
  font-size: clamp(48px, 4.1vw, 59px);
  font-weight: 400;
  line-height: 1.04;
}

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

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

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

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

.gd37-community__intro p {
  margin: 10px 0 0;
  color: #567b73;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.gd37-community-gallery {
  position: relative;
  height: 430px;
  margin-top: 4px;
}

.gd37-community-photo {
  --community-mask: none;
  position: absolute;
  margin: 0;
}

.gd37-community-photo__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e3e6dd;
  -webkit-mask: var(--community-mask) center / 100% 100% no-repeat;
  mask: var(--community-mask) center / 100% 100% no-repeat;
}

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

.gd37-community-photo--family {
  --community-mask: url("masks/community-family.svg");
  top: 0;
  left: -18px;
  width: 810px;
  height: 412px;
}

.gd37-community-photo--family .gd37-community-photo__media img {
  object-position: center 58%;
}

.gd37-community-photo__accent {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.gd37-community-photo__accent--top {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 55px;
}

.gd37-community-photo__accent--bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 80px;
}

.gd37-community-photo--family figcaption {
  position: absolute;
  right: 46px;
  bottom: 5px;
  z-index: 3;
  display: flex;
  min-width: 210px;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 21px;
  border: 2px solid #d8e7d2;
  border-radius: 49% 51% 47% 53% / 43% 46% 54% 57%;
  background: rgba(255, 253, 248, .95);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.gd37-community-photo--family figcaption span {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gd37-green);
}

.gd37-community-photo--event-left {
  --community-mask: url("masks/community-event-left.svg");
  top: -27px;
  left: 798px;
  width: 266px;
  height: 328px;
}

.gd37-community-photo--event-left .gd37-community-photo__media img {
  object-position: center 47%;
}

.gd37-community-photo--event-right {
  --community-mask: url("masks/community-event-right.svg");
  top: 30px;
  right: -2px;
  width: 263px;
  height: 340px;
}

.gd37-community-photo--event-right .gd37-community-photo__media img {
  object-position: 52% center;
}

.gd37-community-events { margin-top: -6px; }

.gd37-community-events__header {
  display: flex;
  align-items: baseline;
  gap: 90px;
}

.gd37-community-events__header h3 {
  margin: 0;
  font-family: "Adigiana 2", cursive;
  font-size: 27px;
  font-weight: 400;
}

.gd37-community-events__header p {
  margin: 0;
  color: #69867f;
  font-size: 12px;
  font-weight: 700;
}

.gd37-community-events__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 31px;
  margin-top: 18px;
}

.gd37-community-events__line {
  position: absolute;
  top: 4px;
  right: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: 40px;
}

.gd37-community-event {
  position: relative;
  z-index: 1;
}

.gd37-community-event > span {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  border: 2px solid var(--event-color, var(--gd37-yellow));
  border-radius: 50%;
  background: var(--event-bg, #fff2d8);
}

.gd37-community-event > span::before,
.gd37-community-event > span::after,
.gd37-community-event > span i {
  position: absolute;
  content: "";
}

.gd37-community-event > span i {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--event-color, var(--gd37-yellow));
  transform: translate(-50%, -50%);
}

.gd37-community-event > span::before {
  top: 10px;
  left: 8px;
  width: 24px;
  height: 12px;
  border-top: 2px solid var(--event-color, var(--gd37-yellow));
  border-radius: 50%;
  transform: rotate(-18deg);
}

.gd37-community-event > span::after {
  right: 7px;
  bottom: 8px;
  width: 16px;
  height: 9px;
  border-bottom: 2px solid var(--event-color, var(--gd37-yellow));
  border-radius: 50%;
  transform: rotate(-14deg);
}

.gd37-community-event h4 {
  max-width: 210px;
  margin: 9px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.gd37-community-event--blue {
  --event-color: var(--gd37-blue);
  --event-bg: #eaf7fa;
}

.gd37-community-event--green {
  --event-color: var(--gd37-green);
  --event-bg: #eff8ea;
}

.gd37-community-event--orange {
  --event-color: #f0a300;
  --event-bg: #fff2d8;
}

.gd37-community-event:nth-of-type(2),
.gd37-community-event:nth-of-type(5) { text-align: center; }

.gd37-community-event:nth-of-type(2) > span,
.gd37-community-event:nth-of-type(5) > span { margin-inline: auto; }

.gd37-community-event:nth-of-type(3),
.gd37-community-event:nth-of-type(4) { text-align: center; }

.gd37-community-event:nth-of-type(3) > span,
.gd37-community-event:nth-of-type(4) > span,
.gd37-community-event:nth-of-type(3) h4,
.gd37-community-event:nth-of-type(4) h4 { margin-inline: auto; }

.gd37-community-event:nth-of-type(5) h4 { margin-inline: auto 0; }

.gd37-community__conclusion {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 75px;
  margin-top: 21px;
  padding: 23px 35px 18px;
  overflow: hidden;
  background: #eaf5e4;
  clip-path: polygon(0 12%, 12% 5%, 27% 9%, 42% 4%, 58% 10%, 73% 3%, 88% 8%, 100% 15%, 99.5% 86%, 85% 92%, 70% 87%, 54% 94%, 38% 88%, 23% 96%, .5% 86%);
}

.gd37-community__conclusion-line {
  position: absolute;
  top: 15px;
  left: 23px;
  width: 92px;
  height: 20px;
  border-top: 5px solid var(--gd37-green);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-5deg);
}

.gd37-community__conclusion h3 {
  margin: 0;
  font-family: "Adigiana 2", cursive;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

.gd37-community__conclusion h3 em {
  color: var(--gd37-orange-strong);
  font-style: normal;
}

.gd37-community__conclusion p {
  margin: 0;
  color: #4c756c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.gd37-community__green-strokes,
.gd37-community__blue-ripples {
  position: absolute;
  z-index: 3;
}

.gd37-community__green-strokes {
  top: 180px;
  left: calc(50% + 58px);
  width: 70px;
}

.gd37-community__blue-ripples {
  top: 118px;
  right: 70px;
  width: 92px;
}

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

@media (max-width: 1220px) and (min-width: 901px) {
  .gd37-community-gallery {
    transform: scale(.86);
    transform-origin: top left;
    width: 116.3%;
    margin-bottom: -60px;
  }
}

@media (max-width: 900px) {
  .gd37-community { min-height: 0; }

  .gd37-community__header {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  .gd37-community__intro { margin-top: 0; }

  .gd37-community-gallery {
    display: grid;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
  }

  .gd37-community-photo,
  .gd37-community-photo--family,
  .gd37-community-photo--event-left,
  .gd37-community-photo--event-right {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  .gd37-community-photo--family {
    grid-column: 1 / -1;
    aspect-ratio: 810 / 412;
  }

  .gd37-community-photo--event-left { aspect-ratio: 266 / 328; }
  .gd37-community-photo--event-right { aspect-ratio: 263 / 340; }

  .gd37-community-events { margin-top: 28px; }

  .gd37-community-events__header {
    display: block;
  }

  .gd37-community-events__header p { margin-top: 6px; }

  .gd37-community-events__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .gd37-community-events__line { display: none; }

  .gd37-community-event,
  .gd37-community-event:nth-child(n) {
    display: grid;
    min-height: 88px;
    grid-template-columns: 39px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1.5px solid var(--event-color, var(--gd37-yellow));
    border-radius: 25px 29px 24px 31px;
    background: var(--event-bg, #fff2d8);
    text-align: left;
  }

  .gd37-community-event > span,
  .gd37-community-event:nth-child(n) > span {
    width: 39px;
    height: 39px;
    margin: 0;
    border: 0;
    background: rgba(255, 253, 248, .8);
  }

  .gd37-community-event h4,
  .gd37-community-event:nth-child(n) h4 {
    margin: 0;
    font-size: 13px;
  }

  .gd37-community-event:last-child { grid-column: 1 / -1; }

  .gd37-community__conclusion {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
    padding: 34px 28px 27px;
  }

  .gd37-community__green-strokes,
  .gd37-community__blue-ripples { display: none; }
}

@media (max-width: 700px) {
  .gd37-community__top-wave { height: 72px; }

  .gd37-community__inner {
    padding-top: 87px;
    padding-bottom: 52px;
  }

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

  .gd37-community__kicker span {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }

  .gd37-community__title {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.02;
  }

  .gd37-community__title span { display: block; }

  .gd37-community__underline {
    width: 70%;
    height: 9px;
    border-bottom-width: 3px;
  }

  .gd37-community__header { gap: 15px; }

  .gd37-community__intro strong {
    font-size: 14px;
    line-height: 1.4;
  }

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

  .gd37-community__intro p br { display: none; }

  .gd37-community-gallery {
    gap: 8px;
    margin-top: 18px;
  }

  .gd37-community-photo--family figcaption {
    right: 8px;
    bottom: -12px;
    min-width: 160px;
    min-height: 52px;
    padding: 9px 14px;
    font-size: 8px;
  }

  .gd37-community-photo__accent--bottom {
    width: 92px;
    height: 43px;
  }

  .gd37-community-events { margin-top: 25px; }

  .gd37-community-events__header h3 { font-size: 24px; }

  .gd37-community-events__header p {
    font-size: 11px;
    line-height: 1.45;
  }

  .gd37-community-events__track {
    gap: 8px;
    margin-top: 13px;
  }

  .gd37-community-event,
  .gd37-community-event:nth-child(n) {
    min-height: 82px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 20px 23px 19px 25px;
  }

  .gd37-community-event > span,
  .gd37-community-event:nth-child(n) > span {
    width: 34px;
    height: 34px;
  }

  .gd37-community-event h4,
  .gd37-community-event:nth-child(n) h4 {
    font-size: 11px;
    line-height: 1.25;
  }

  .gd37-community__conclusion {
    gap: 10px;
    padding: 32px 20px 25px;
    clip-path: polygon(0 7%, 24% 2%, 52% 7%, 76% 1%, 100% 8%, 99% 94%, 72% 98%, 49% 93%, 25% 99%, 1% 92%);
  }

  .gd37-community__conclusion-line {
    top: 16px;
    left: 18px;
    width: 72px;
    border-top-width: 3px;
  }

  .gd37-community__conclusion h3 {
    font-size: 23px;
    line-height: 1.2;
  }

  .gd37-community__conclusion p {
    font-size: 11px;
    line-height: 1.5;
  }

  .gd37-community__conclusion p br { display: none; }
  .gd37-community__bottom-wave { height: 45px; }
}

@media (max-width: 360px) {
  .gd37-community-photo--family figcaption {
    min-width: 144px;
    font-size: 7px;
  }

  .gd37-community-event,
  .gd37-community-event:nth-child(n) {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-inline: 8px;
  }

  .gd37-community-event > span,
  .gd37-community-event:nth-child(n) > span {
    width: 30px;
    height: 30px;
  }
}
