// Frontend styles for the text-image block

.wp-block-vitalisite-fse-text-image {
  box-sizing: border-box;
  overflow: hidden;

  .wp-block-columns {
    align-items: center !important;
  }

  &.is-reversed {
    .wp-block-columns {
      flex-direction: row-reverse;
    }
  }

  &.has-background {
    background-color: var(--wp--preset--color--tertiary);
    border-radius: var(--wp--custom--image-radius);
    padding: 50px 20px;
  }

  .vitalisite-rounded-image img {
    border-radius: var(--wp--custom--image-radius);
    object-fit: cover;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 781px) {
  .wp-block-vitalisite-fse-text-image {
    &.is-reversed {
      .wp-block-columns {
        flex-direction: column;
      }
    }

    &.has-background {
      padding: 50px 20px;
    }
  }
}
