@import url(./_reset.css);
@import url(./_webflow.css);
@import url(./_variables.css);
@import url(./_styleguide.css);

/* Include packages */
@import url(../js/photoswipe/photoswipe.css);

/* Global style modifiers */

.ak-edges {
  padding-left: var(--page-edge-padding);
  padding-right: var(--page-edge-padding);
}

/* For mobile devices (landscape and smaller, max-width: 767px) */
@media (max-width: 767px) {
  .sm-hide {
    display: none !important;
  }
  .sm-only {
    display: block !important;
  }
  .sm-only-flex {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .sm-only {
    display: none !important;
  }
  .sm-only-flex {
    display: flex !important;
  }
}

/* For tablet devices */
@media (max-width: 991px) {
  .lg-hide {
    display: none !important;
  }
  .lg-only {
    display: block !important;
  }
  .lg-only-flex {
    display: flex !important;
  }
}

@media (min-width: 992px) {
  .lg-only {
    display: none !important;
  }
  .lg-only-flex {
    display: none !important;
  }
}

/* For devices larger than tablets (992px and up) */
@media (min-width: 992px) {
  .dk-hide {
    display: none !important;
  }
  .dk-block {
    display: block !important;
  }
  .dk-flex {
    display: flex !important;
  }
}

/* Temporary Webflow Overrides */
ol.list {
  list-style-type: decimal;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

/* Artwork cards use background images and need full tile width in the grid. */
.work-image.w-inline-block {
  display: flex;
  width: 100%;
}

.layout-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.layout-main {
  padding-bottom: 1rem;
}