.colorBox {
  display: block;
  position: relative;
  margin: 48px 0;
}

.colorBox--has-title {
  margin-top: 88px;
}

.colorBox__title {
  position: absolute;
  min-width: 180px;
  left: 0;
  text-align: center;
  padding: 8px 20px;
  top: -40px;
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: rgba(#fff, 0.8);
  background: rgba(165, 210, 252, 0.1);
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.colorBox__text {
  background-color: rgba(165, 210, 252, 0.1);
  border-radius: 9px;
  padding: 24px;
  color: rgba(58, 80, 114, 1);
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x: auto;
}

.colorBox--has-title .colorBox__text {
  border-top-left-radius: 0;
}

.colorBox__text p {
  font-size: 18px !important;
  line-height: 27px !important;
}

.colorBox__text p:last-child {
  margin-bottom: 0 !important;
}

.colorBox img {
  display: inline;
}

.colorBox blockquote {
  border: none !important;
  background-color: transparent !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
}

.colorBox blockquote:last-child {
  margin: 0 !important;
}

@media screen and (max-width: 1024px) {
  .colorBox__text {
    padding: 20px;
    font-size: 16px;
    line-height: 24px;
  }
}

.colorBox--gray .colorBox__title {
  background-color: rgba(45, 154, 255, 1);
  color: rgba(255, 255, 255, 0.8);
}

.colorBox--gray .colorBox__text {
  background-color: rgba(165, 210, 252, 0.1);
}

.colorBox--blue .colorBox__title {
  background-color: #b4dafd;
}

.colorBox--blue .colorBox__text {
  background-color: #cbe6ff;
}

.colorBox--yellow .colorBox__title {
  background-color: #fdedb4;
}

.colorBox--yellow .colorBox__text {
  background-color: #fff7cb;
}

.colorBox--purple .colorBox__title {
  background-color: #e4cfff;
}

.colorBox--purple .colorBox__text {
  background-color: #e8d7ff;
}

.colorBox--darkblue .colorBox__title {
  background-color: #b4cdfd;
}

.colorBox--darkblue .colorBox__text {
  background-color: #cbddff;
}

.colorBox--pink .colorBox__title {
  background-color: #fdb4d7;
}

.colorBox--pink .colorBox__text {
  background-color: #ffcbe4;
}

.colorBox--aqua .colorBox__title {
  background-color: #b4f9fd;
}

.colorBox--aqua .colorBox__text {
  background-color: #cbfffc;
}

.colorBox--green .colorBox__title {
  background-color: #befdb4;
}

.colorBox--green .colorBox__text {
  background-color: #d8ffcb;
}