:root {
  --section-padding-x: 1.5rem;
  --section-sm-px: var(--section-padding-sm-x, var(--section-padding-x));
  --section-md-px: var(--section-padding-md-x, var(--section-padding-x));
  --section-lg-px: var(--section-padding-lg-x, var(--section-padding-x));
  --section-xl-px: var(--section-padding-xl-x, var(--section-padding-x));
  --section-2xl-px: var(--section-padding-2xl-x, var(--section-padding-x));
  --container-sm-w: var(--container-width-sm, 540px);
  --container-md-w: var(--container-width-md, 720px);
  --container-lg-w: var(--container-width-lg, 960px);
  --container-xl-w: var(--container-width-xl, 1140px);
  --container-2xl-w: var(--container-width-2xl, 1320px);
}

.container,
.container-fluid {
  --container-width: 100%;
  max-width: 100%;
}

.container-fluid {
  --section-padding-x: 0;
  overflow-x: hidden;
}

@media (min-width: 576px) {
  .container-sm,
  .container {
    --section-padding-x: var(--section-sm-px);
    --container-width: var(--container-sm-w);
    max-width: var(--container-sm-w);
  }
}
@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    --section-padding-x: var(--section-md-px);
    --container-width: var(--container-md-w);
    max-width: var(--container-md-w);
  }
}
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    --section-padding-x: var(--section-lg-px);
    --container-width: var(--container-lg-w);
    max-width: var(--container-lg-w);
  }
}
@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    --section-padding-x: var(--section-xl-px);
    --container-width: var(--container-xl-w);
    max-width: var(--container-xl-w);
  }
}
@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    --section-padding-x: var(--section-2xl-px);
    --container-width: var(--container-2xl-w);
    max-width: var(--container-2xl-w);
  }
}
.row {
  width: calc(100% + var(--bs-gutter-x));
  /* Bootstrap override */
}
@media (min-width: 400px) {
  .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}
@media (min-width: 768px) {
  .row > *.px-md-default {
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  }
}

.col {
  /* Must be placed after dev.section.scss, because padding variables are defined above */
}
.col-sticky {
  z-index: 1;
  position: sticky;
  top: calc(var(--navigation-height) + var(--navigation-space-around-y));
  height: 100%;
}
@media (min-width: 992px) {
  .col-lg-sticky {
    z-index: 1;
    position: sticky;
    top: calc(var(--navigation-height) + var(--navigation-space-around-y));
    height: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-center {
    display: flex;
    flex-direction: column;
    place-items: center;
    text-align: center;
  }
}

:root {
  /* Magic Grid will set these */
  --masonry-columns: 1;
}

.grid-masonry {
  position: relative;
  width: 100%;
}
.grid-masonry div {
  display: flex;
  position: absolute; /* Magic Grid will position these */
  align-items: center;
  justify-content: center;
  width: calc((var(--container-width) - var(--bs-gutter-x) - (var(--masonry-columns)) * var(--masonry-gutter)) / var(--masonry-columns));
  overflow: hidden;
  border-radius: var(--number-corner-1);
  background-color: var(--color-static-background-dark-variant-10);
}
@media (min-width: 576px) {
  .grid-masonry div {
    --masonry-columns: 2;
  }
}
@media (min-width: 992px) {
  .grid-masonry div {
    --masonry-columns: 3;
  }
}
.grid-masonry div a,
.grid-masonry div .image-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}