/**
 * Hero Page Builder - Paragraph
 */

 
.hero-page-builder__layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  align-items: flex-start;
}

.hero-page-builder__text {
  max-width: 100%;
  flex: none;
}

.hero-page-builder__title {
  font-size: 27px !important;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary) !important;
  text-transform: uppercase;
}

.hero-page-builder__description {
  font-size: 1rem;
  color: #333;
}

.hero-page-builder__images {
  width: 100%;
  display: block;
}

.hero-page-builder__images-left > .hero-page-builder__image-row,
.hero-page-builder__images-right {
  display: none;
}

.hero-page-builder__image-large {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-height: 100%;
}

.hero-page-builder__image-large img {
  margin: 0 auto;
}

.hero-page-builder__image-large img,
.hero-page-builder__image-small img,
.hero-page-builder__image-vertical img {
  border-radius: 16px;
}

@media (min-width: 700px) {
  .hero-page-builder__layout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
  }

  .hero-page-builder__text {
    flex: 0 0 calc(41.6667% - 20px);
    max-width: 600px;
  }

  .hero-page-builder__images {
    flex: 0 0 calc(58.3333% - 20px);
    display: flex;
    gap: 20px;
  }

  .hero-page-builder__image-large img {
    margin: unset;
  }
}

@media (min-width: 1000px) {
  .hero-page-builder__title {
    font-size: 48px !important;
  }

  .hero-page-builder__images-left > .hero-page-builder__image-row,
  .hero-page-builder__images-right {
    display: flex;
  }

  .hero-page-builder__images-left {
    flex: 0 0 57.14%;
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
  }

  .hero-page-builder__images-right {
    flex: 0 0 42.86%;
    align-items: center;
    justify-content: center;
  }

  .hero-page-builder__images-right img {
    height: 100%;
    max-height: 500px;
    object-fit: cover;
  }

  .hero-page-builder__image-large {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .hero-page-builder__image-row {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    gap: 20px;
  }

  .hero-page-builder__image-small {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
  }

  .hero-page-builder__image-vertical {
    width: 100%;
    max-height: 100%;
    border-radius: 16px;
    overflow: hidden;
  }
}