/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-callout-section {
  /**
    @prop --section-inner-gap:
      Inner gap size between image and text
      - default: 5%
  */
  --section-inner-gap: 5%;
  /**
    @prop --section-media-width:
      width of media part
      - default: 45%
  */
  --section-media-width: 45%;
  /**
    @prop --section-text-width:
      width of text part
      - default: 50%
  */
  --section-text-width: 50%;
  /**
    @prop --section-text-inner-gap:
      inner gap inside text part
      - default: 1rem
  */
  --section-text-inner-gap: 1rem;
  /**
    @prop --image-fit:
      object-fit property of image
      - default: contain
  */
  --image-fit: contain;
  /**
    @prop --image-object-position:
      object-position of image
      - default: top
  */
  --image-object-position: top;
  display: block;
}
go-callout-section .callout {
  display: flex;
  flex-direction: column;
  gap: var(--section-inner-gap);
}
@media (min-width: 600px) {
  go-callout-section .callout {
    flex-direction: row;
    align-items: stretch;
  }
}
@media (min-width: 600px) {
  go-callout-section .callout.reverse {
    flex-direction: row-reverse;
  }
}
@media (min-width: 600px) {
  go-callout-section .media {
    width: var(--section-media-width);
  }
}
go-callout-section .media img {
  width: 100%;
  height: 100%;
  object-fit: var(--image-fit);
  object-position: var(--image-object-position);
}
go-callout-section .text {
  display: flex;
  flex-direction: column;
  gap: var(--section-text-inner-gap);
}
@media (min-width: 600px) {
  go-callout-section .text {
    width: var(--section-text-width);
  }
}
go-callout-section .text .actions {
  margin-top: auto;
}