.block-media-and-text {
  --block-bg: transparent;
  --layout-direction: row;
  --text-box-flex: 0 1 50%;
  --image-box-flex: 0 1 50%;
  --text-align: left;
  --align-items: flex-start;
  --tag-color: var(--tg-color-primary-black);
  padding: 50px 0;
  background: var(--block-bg);
}

.block-media-and-text--bg-cyan {
  --block-bg: #E4F5F8;
}

.block-media-and-text--bg-blue {
  --block-bg: var(--tg-color-blue-50);
}

.block-media-and-text--bg-beige {
  --block-bg: #FDF8F3;
}

.block-media-and-text--bg-dark-beige {
  --block-bg: #f4f0ee;
}

.block-media-and-text--bg-purple {
  --block-bg: #F5F3FF;
}

.block-media-and-text--bg-pink {
  --block-bg: #FFF0F5;
}

.block-media-and-text--bg-light-purple {
  --block-bg: #F8F5FF;
}

.block-media-and-text--layout-column {
  --layout-direction: column;
  --text-box-flex: 0 1 auto;
  --image-box-flex: 0 1 auto;
  --text-align: center;
  --align-items: center;
}

.block-media-and-text--tag-pink {
  --tag-color: #F07FAC;
}

.block-media-and-text--tag-purple {
  --tag-color: #8278E8;
}

.block-media-and-text--tag-cyan {
  --tag-color: #54BFCE;
}

.block-media-and-text--tag-orange {
  --tag-color: #E49872;
}

.block-media-and-text--tag-blue {
  --tag-color: #2060E6;
}

.block-media-and-text__row {
  display: flex;
  flex-direction: var(--layout-direction);
  justify-content: space-between;
  gap: 20px;
}

.block-media-and-text__text-box {
  flex: var(--text-box-flex);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: var(--align-items);
  text-align: var(--text-align);
}

.block-media-and-text__text-box-inner {
  max-width: 460px;
  margin: 0 auto;
}

.block-media-and-text--layout-column .block-media-and-text__text-box-inner {
  max-width: 920px;
}

.block-media-and-text__text-box-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: var(--align-items);
  gap: 16px;
}

.block-media-and-text__image-box {
  flex: var(--image-box-flex);
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-media-and-text__image-box img {
  display: block;
  height: auto;
  max-width: 100%;
}

.block-media-and-text__tag {
  color: var(--tag-color);
  font-weight: 500;
  font-size: 13px;
  line-height: 1em;
  text-transform: uppercase;
  width: 100%;
}

.block-media-and-text__title {
  color: var(--tg-color-primary-black);
  width: 100%;
}

.block-media-and-text__text {
  color: rgba(14, 17, 85, 0.6);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  width: 100%;
}

.block-media-and-text__text p:last-child {
  margin-bottom: 0;
}

.block-media-and-text__buttons {
  width: 100%;
}

.block-media-and-text--layout-column .block-media-and-text__buttons .tg-buttons {
  justify-content: center;
}

@media screen and (min-width: 992px) {
  .block-media-and-text--layout-row.block-media-and-text--direction-normal {
    --layout-direction: row;
  }

  .block-media-and-text--layout-row.block-media-and-text--direction-reversed {
    --layout-direction: row-reverse;
  }

  .block-media-and-text--layout-column.block-media-and-text--direction-normal {
    --layout-direction: column;
  }

  .block-media-and-text--layout-column.block-media-and-text--direction-reversed {
    --layout-direction: column-reverse;
  }
}

@media screen and (max-width: 991px) {
  .block-media-and-text {
    --layout-direction: column;
    --text-box-flex: 0 1 auto;
    --image-box-flex: 0 1 auto;
  }

  .block-media-and-text__text-box {
    padding: 0;
  }

  .block-media-and-text__tag {
    font-size: 12px;
  }

  .block-media-and-text__title {
    font-size: 28px;
    line-height: 36px;
  }

  .block-media-and-text__text {
    font-size: 15px;
    line-height: 24px;
  }
}