@import (less) "../values";
@import (less) "../variables.less";

:root {
  --img-bottom-padding-ratio: "56.25%";
  --img-height-viewport: "56.25vw";
  --img-bottom-padding-fraction: 0.5625;
  --small-visual-max-width: 150px;
}

.c-force-aspect-ratio {
  display: static;
  width: @xl;
  object-fit: cover;
  height: calc(@xl*2 / 3);
  margin: 0 auto;

  @media @tablet {
    height: calc(100vw * 2 / 3);
  }
}

.c-img-slideshow-fullscreen {
  display: static;
  width: 100%;
  object-fit: cover;
  height: calc(100vh - 37px);
  margin: 0 auto;

  @media @tablet {
    width: @xl;
    height: calc(100vw * 2 / 3);
  }
}

.c-img-slideshow-side-by-side {
  object-fit: cover;
  width: 100%;
  height: calc(50vw * 2 / 3);
  padding: @s16;

  @media (max-width: @lg) {
    height: calc(100vw * 2 / 3);
  }
}

.c-img-slideshow-side-by-side-portrait {
  object-fit: cover;
  width: 100%;
  height: calc(90vh);
  min-width: 400px;
  min-height: 600px;
  padding: @s16;

  @media (max-width: @lg) {
    height: calc(90vh - 37px);
    width: calc(90vh * 2 / 3);
    min-height: unset;
    min-width: unset;
  }

  @media @mobile {
    width: 90vw;
    height: calc(90vw * 3 / 2);
    padding: 0;
  }
}

.c-container-stacked {
  padding-bottom: var(--img-bottom-padding-ratio);
}

.c-container-fullscreen {
  @media @tablet {
    padding-bottom: var(--img-bottom-padding-ratio);
  }
}

.c-container-small-visual {
  height: calc(
    var(--img-bottom-padding-fraction) * var(--small-visual-max-width)
  );
  max-width: var(--small-visual-max-width);
  width: calc(100vw - 32px);
  margin: auto;

  @media @mobile {
    max-height: calc(
      var(--img-bottom-padding-fraction) * var(--small-visual-max-width)
    );
    height: calc(var(--img-bottom-padding-fraction) * (100vw - 32px));
    margin: auto;
  }
}

.c-img {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.c-img-stacked {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.c-img-fullscreen {
  position: static;
  object-fit: cover;
  width: 100%;
  height: calc(100vh - 37px);

  @media @tablet {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
  }
}

.c-img-small-visual {
  display: block;
  position: absolute;
  width: calc(100vw - 32px);
  padding: 0;
}

.c-img-small-visual-url {
  max-width: var(--small-visual-max-width);
  width: calc(100vw - 32px);
  margin: @s16 @s16 0 0;

  @media @mobile {
    margin: auto;
  }
}

.c-container-side-by-side {
  height: 100%;
}

.c-img-side-by-side {
  width: 50vw;
  // height: var(--img-height-viewport); // Removing the height, because supplying height and width will ALWAYS stretch the image

  @media (max-width: @lg) {
    width: 100vw;
    height: auto;
  }
}

.c-container-side-by-side-portrait {
  float: left;
  height: 100%;
}

.c-img-side-by-side-portrait {
  object-fit: cover;
  width: calc(90vh * 2 / 3);
  height: 100%;
  min-width: 400px;
  min-height: 600px;

  @media (max-width: @lg) {
    width: 100vw;
    height: auto;
    min-height: unset;
    min-width: unset;
  }
}

.c-fig-hidden-when-desktop {
  display: none;

  @media @tablet {
    display: block;
    padding-left: @s8;
  }
}

.c-large-padding-left {
  padding: @s16 @s8 @s16 @s32;

  @media (max-width: @lg) {
    padding: @s16;
  }
}

.c-large-padding-right {
  padding: @s16 @s32 @s16 @s8;

  @media (max-width: @lg) {
    padding: @s16;
  }
}