/**
 * Use in order to make a set of rules only apply above
 * or below a certain breakpoint.
 * Standard usage:

 @include breakpoint(tablet){
 	// Applies to screen sizes tablet and LARGER
 }

 @include breakpoint(tablet up){
 	// Applies to screen sizes tablet and LARGER
 }

 @include breakpoint(tablet down){
 	// Applies to screen sizes tablet and SMALLER
 }
 *
 **/
/**
 * Set custom typography sizes (e.g. header)
 * @param  {int} $size        font-size
 * @param  {int} $line-height line-height
 * @param  {int} $av          AV letter-spacing from XD
 * @return {void}
 */
/**
 * Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
 *
 * @param {Number} $value - Value to convert to a unitless line height
 * @param {Number} $base - The font size to use to work out the line height - defaults to $rem-font-size
 *
 * @return {Number} - Unitless number
 */
/**
 * AV letter spacing measurement convertor from Adobe applications
 * https://scotch.io/tutorials/converting-photoshop-letter-spacing-to-css
 */
/*
 * https://every-layout.dev/layouts/stack/
 */
.h-stack > * {
  margin-block: 0;
}
.h-stack > * + * {
  margin-top: var(--unit);
}
.h-stack--zero > * {
  margin-block: 0;
}
.h-stack--small > * {
  margin-block: 0;
}
.h-stack--small > * + * {
  margin-top: var(--unit-small);
}
.h-stack--xsmall > * {
  margin-block: 0;
}
.h-stack--xsmall > * + * {
  margin-top: var(--unit-xsmall);
}
.h-stack--medium > * {
  margin-block: 0;
}
.h-stack--medium > * + * {
  margin-top: var(--unit-medium);
}
.h-stack--large > * {
  margin-block: 0;
}
.h-stack--large > * + * {
  margin-top: var(--unit-large);
}
.h-stack--xlarge > * {
  margin-block: 0;
}
.h-stack--xlarge > * + * {
  margin-top: var(--unit-xlarge);
}

.h-stack2 > * {
  margin-block: 0;
}
.h-stack2 > * + * {
  margin-top: var(--unit2);
}
.h-stack2--small > * {
  margin-block: 0;
}
.h-stack2--small > * + * {
  margin-top: calc(var(--unit2) / 2);
}
.h-stack2--medium > * {
  margin-block: 0;
}
.h-stack2--medium > * + * {
  margin-top: calc(var(--unit2) * 2);
}

.h-stack-row > * {
  margin-inline: 0;
}
.h-stack-row > * + * {
  margin-left: var(--unit);
}

.h-stack-row--xsmall > * {
  margin-inline: 0;
}
.h-stack-row--xsmall > * + * {
  margin-left: var(--unit-xsmall);
}

:root,
body {
  --sht-block-gallery--skew-outer: -7deg;
  --sht-block-gallery--skew-inner: 7deg;
}

.wp-block-sht-gallery + .wp-block-media-text {
  margin-top: var(--unit2);
}
.wp-block-sht-gallery__entries > * {
  margin-block: 0;
}
.wp-block-sht-gallery__entries > * + * {
  margin-top: var(--unit);
}
@media screen and (min-width: 48em) {
  .wp-block-sht-gallery__entries {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    transform: skewY(var(--sht-block-gallery--skew-outer));
  }
  @supports (display: grid) {
    .wp-block-sht-gallery__entries {
      display: grid;
      gap: var(--unit2);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
    }
  }
}
@media screen and (min-width: 80em) {
  @supports (display: grid) {
    .wp-block-sht-gallery__entries {
      gap: var(--unit2-medium);
    }
  }
}
.wp-block-sht-gallery__entry {
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 48em) {
  .wp-block-sht-gallery__entry {
    margin: var(--unit2-small);
    flex: 0 0 calc(25% - var(--unit2));
    transform: skewY(var(--sht-block-gallery--skew-inner));
  }
  @supports (display: grid) {
    .wp-block-sht-gallery__entry {
      margin: 0;
    }
  }
}
@media screen and (min-width: 80em) {
  .wp-block-sht-gallery__entry {
    margin: var(--unit2);
    flex-basis: calc(25% - var(--unit2-medium));
  }
  @supports (display: grid) {
    .wp-block-sht-gallery__entry {
      margin: 0;
    }
  }
}
@media screen and (min-width: 48em) {
  @supports (object-fit: cover) {
    @supports (aspect-ratio: 1/1) {
      .wp-block-sht-gallery__figure {
        aspect-ratio: 1/1;
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.wp-block-sht-gallery__figure a {
  display: block;
}
@media screen and (min-width: 48em) {
  @supports (object-fit: cover) {
    .wp-block-sht-gallery__image {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}
.wp-block-sht-gallery__title {
  color: var(--wp--preset--color--black);
  letter-spacing: -0.01em;
  padding-right: 40%;
  margin-bottom: var(--unit);
}
@media screen and (min-width: 80em) {
  .wp-block-sht-gallery__title {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 80em) {
  .wp-block-sht-gallery + .wp-block-media-text.with--tallimage.has-media-on-the-right {
    margin-top: calc(var(--unit2-medium) * -1);
  }
}