.sdgs-top__message {
  font-size: var(--size-20);
  font-weight: var(--font-weight-bold);
}

.sdgs-top__goal-image {
  width: 100%;
  max-width: var(--size-800);
  height: auto;
  margin: 0 auto;
  display: block;
}

.sdgs-top__info {
  margin-top: var(--size-54);
}

.sdgs-middle {
  background: var(--color-bg-light-gray2);
  padding: var(--size-80) 0;
  margin-bottom: var(--size-80);
}

.sdgs-points {
  display: grid;
  grid-template-columns: var(--size-310) 1fr;
}

.sdgs-points__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-main-blue);
}

.sdgs-points__key {
  font-size: var(--size-32);
  font-weight: var(--font-weight-bold);
}

.sdgs-points__value {
  align-self: flex-end;
  line-height: 2;
  margin-top: var(--size-32);
  font-size: var(--size-24);
  font-weight: var(--font-weight-bold);
}

.initiative {
  padding: var(--size-32) 0;
  display: grid;
  grid-template-areas:
    "title image"
    "content image";
  column-gap: var(--size-40);
  margin-bottom: var(--size-40);
}

.initiative__title {
  grid-area: title;
}

.initiative__content {
  grid-area: content;
}

.initiative__image {
  grid-area: image;
  width: 100%;
  max-width: var(--size-400);
  height: auto;
}

.initiative__goal-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-16);
}

.sdgs-goal-image {
  width: var(--size-100);
  height: var(--size-100);
}

@media screen and (max-width: 768px) {
  .sdgs-middle {
    padding: var(--size-20) 0;
  }

  .sdgs-points {
    grid-template-rows: auto auto;
    grid-template-columns: initial;
  }

  .sdgs-points__key {
    font-size: var(--size-24);
  }

  .sdgs-points__value {
    margin-top: var(--size-16);
    font-size: var(--size-16);
  }

  .initiative {
    grid-template-areas:
      "title"
      "image"
      "content";
    margin-bottom: 0;
  }

  .sdgs-goal-image {
    width: var(--size-80);
    height: var(--size-80);
  }
}