/* Content, notice and image */
.fold--content-notice-image {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "image"
    "notice";
  gap: 2.5rem;
}

.content-notice-image--content {
  grid-area: content;
}

.content-notice-image--headline {
  margin: 0 0 2rem;
  color: #00B596;
  font-family: "CalvertMT", "sans serif";
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
}

.content-notice-image--intro {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6875rem;
}

.content-notice-image--intro p,
.content-notice-image--box-text p {
  margin: 0 0 1.5rem;
}

.content-notice-image--intro p:last-child,
.content-notice-image--box-text p:last-child {
  margin-bottom: 0;
}

.content-notice-image--intro a,
.content-notice-image--box-text a {
  color: inherit;
  text-decoration: underline;
}

.content-notice-image--image {
  grid-area: image;
  width: min(100%, 34rem);
  margin: 0 auto;
}

.content-notice-image--image img {
  display: block;
  width: 100%;
  height: auto;
}

.content-notice-image--box {
  grid-area: notice;
  padding: 2rem 1.5rem;
  border-radius: 1.5rem;
  background: #2641D9;
  color: #fff;
}

.content-notice-image--box-headline {
  margin: 0 0 1.5rem;
  color: #00B596;
  font-family: "CalvertMT", "sans serif";
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
}

.content-notice-image--box-text {
  font-size: 1rem;
  line-height: 1.6875rem;
}

.fold__white .content-notice-image--intro {
  color: #00007D;
}

@media (min-width: 43.125em) {
  .fold--content-notice-image {
    position: relative;
    display: block;
  }

  .content-notice-image--headline {
    font-size: 3.125rem;
    line-height: 3.875rem;
  }

  .content-notice-image--content {
    width: 56%;
  }

  .content-notice-image--intro,
  .content-notice-image--box-text {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  .content-notice-image--box {
    position: relative;
    z-index: 1;
    width: 72%;
    margin-top: 3rem;
    padding: 2.5rem;
    border-radius: 2rem;
  }

  .content-notice-image--image {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -2rem;
    width: 48%;
    max-width: 38rem;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .content-notice-image--box-headline {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media (min-width: 64.0625em) {
  .content-notice-image--image {
    right: 0;
    width: 46%;
    max-width: 38rem;
  }

  .content-notice-image--box {
    width: 70%;
  }
}

@media (min-width: 80.0625em) {
  .content-notice-image--headline {
    font-size: 3.5rem;
    line-height: 4.25rem;
  }

  .content-notice-image--box {
    padding: 2.5rem 3rem;
  }
}