.callout {
  margin-left: calc(100% - 761px);
  margin-bottom: 32px;
  padding: 32px;
  width: 761px;
  height: 100%;
  background-image: url(../../images/icons/bg-brush-area.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.callout.callout-upper {
  display: none;
}

.callout h3,
.callout p {
  max-width: 550px;
}

.callout-text p {
  font-family: var(--regular-font);
}

.callout-link .button {
  margin-bottom: 0;
}

@media only screen and (max-width: 1200px) {
  .callout {
    margin-left: calc(100% - 650px);
    width: 650px;
    margin-bottom: 20px;
    padding: 20px;
  }

  .callout h3,
  .callout p {
    max-width: 600px;
  }
}

@media only screen and (max-width: 992px) {
  .callout.callout-upper {
    display: block;
  }

  .callout.callout-lower {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .callout {
    margin-left: 0;
    width: 100%;
    margin-bottom: 0;
    padding: 20px;
  }

  .callout h3,
  .callout p {
    max-width: auto;
  }
}