@use '../variables/fonts';
@use '../variables/colors';
@use '../variables/spacing';
@use '../variables/line-height';
@use '../variables/breakpoints';

@use '../tools/rfs';
@use '../tools/mq';

// RESET
figure {
    margin: 0;
    padding: 0;
}

// OVERALL STYLES
.image {
  figcaption.figcaption {
    @include rfs.font-size(13px);
    @include rfs.padding-top(8px);
    font-family: fonts.$font-family-sans-serif;
    font-weight: fonts.$font-weight-medium;
    line-height: line-height.$caption;
    color: colors.$gray;
  }
}

// INLINE PHOTO STYLES
figure.inline {
  max-width: 733px;
  margin-left: auto;
  margin-right: auto;
  @include rfs.margin-top(30px);
  @include rfs.margin-bottom(30px);
  img {
    width: 100%;
  }
}

// INSET PHOTO STYLES
.inset-container {
  max-width: 733px;
  margin-left: auto;
  margin-right: auto;
  @include rfs.margin-top(18px);
  figure.inset {
    max-width: 315px;
    float: left;
    margin-left: 0;
    margin-top: 0;
    @include rfs.margin-right(20px);
    img {
      width: 100%;
    }
    @include mq.mq($until:m) {
      max-width: 100%;
      float: none;
      margin: auto;
    }
  }
}

// DIPTYCH PHOTO STYLES
.photoset {
  max-width: 1200px;
  margin: auto;
  @include rfs.margin-top(30px);
  @include rfs.margin-bottom(30px);
  .diptych-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    @include mq.mq($until:m) {
      display: block;
    }
    figure.diptych {
      margin: 0;
      flex: 0 1 49.5%;
      img {
        width: 100%;
        &:last-of-type {
          @include mq.mq($until:m) {
            @include rfs.margin-top(.5rem);
          }
        }
      }
    }
  }
  figcaption.figcaption {
    span.desktop-caption {
      display: inline;
      @include mq.mq($until:m) {
        display: none;
      }
    }
    span.mobile-caption {
      display: none;
      @include mq.mq($until:m) {
        display: inline;
      }
    }
  }
}