@use "../globals/variables" as *;

@media #{$media-tablet-desktop} {
  .field--name-field-media-image {
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .wp-block-drupalmedia-drupal-media-entity {
    display: table;
    width: 100%;
    &.alignleft {
      float: left;
      margin-right: var(--gutter);
      width: 40%;
    }

    &.alignright {
      float: right;
      margin-left: var(--gutter);
      width: 40%;
    }
  }
  .media--view-mode-main-media-wide,
  .media--view-mode-main-media-wide ~ figcaption {
    margin-left: -100px;
    margin-right: -100px;
  }
}

.wp-block-media-mediagallery figcaption,
.wp-block-drupalmedia-drupal-media-entity figcaption,
.field--name-field-caption {
  font-size: smaller;
  caption-side: bottom;
  padding: 10px;
  span {
    color: var(--gray);
  }
}

// Carousel specific
.wp-block-media-mediagallery {
  .splide__slide {
    img {
      border-radius: var(--border-radius);
    }
  }

  .splide__pagination {
    position: relative;
    .splide__pagination__page {
      transform: scale(1.4);
      background: white;
      height: 20px;
      margin: 10px;
      width: 20px;
      border: solid 1px black;
      &.is-active {
        background: black;
      }
    }
  }
}