/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/scss/styles.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Layout

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Header height

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Essential breakpoints

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Grid breakpoints

*/
/* Mixins become one-liners */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Mixins

*/
/**
 * Explicitly neutralizes the effects of `link-style()`.
 * Intended for use in contexts where links are styled
 * as UI controls (e.g. buttons, navigation items).
 */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Config
----------------------------------------------------------------
(re-use the variables you already have – abbreviated here)
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Colour sets

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Mixins
*/
/* Shared implementation – receives a palette + $small toggle */
/* Flavour wrappers – tiny helpers that forward to btn() */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Project specific

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Mixins

*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Hide caption of images

*/
.hide-image-caption .wp-element-caption {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Aspect ratio options

*/
.aspect-ratio-1-1 img {
  aspect-ratio: 1;
}
.aspect-ratio-4-3 img {
  aspect-ratio: 4/3;
}
.aspect-ratio-3-4 img {
  aspect-ratio: 3/4;
}
.aspect-ratio-3-2 img {
  aspect-ratio: 3/2;
}
.aspect-ratio-2-3 img {
  aspect-ratio: 2/3;
}
.aspect-ratio-16-9 img {
  aspect-ratio: 16/9;
}
.aspect-ratio-9-16 img {
  aspect-ratio: 9/16;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Reverse order of flex items

*/
@media screen and (max-width: 781.98px) {
  .stack-on-mobile {
    flex-direction: column;
  }
  .reverse-on-mobile {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap !important;
  }
  .reverse-on-mobile > *:last-child {
    margin-top: 0 !important;
  }
  .center-on-mobile {
    justify-content: center;
    text-align: center;
  }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Large column gap

*/
@media screen and (max-width: 781.98px) {
  .wp-block-columns.large-gap-enabled {
    gap: var(--wp--preset--spacing--x-large) !important;
  }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Enable hover effect of linked images

Required markup structure to make it work in any template:

<div class="hover-effect-enabled">
    <a href="...">
        <img src="...">
    </a>
</div>

Examples of how to use specific aspect ratios:

CSS file

img.example-class {
    aspect-ratio: 3/2;
}

Inline-Styles

<img src"..." styles="aspect-ratio: 3/2;">

*/
.hover-effect-enabled {
  display: block;
}
.hover-effect-enabled.is-style-rounded a {
  border-radius: 100%;
}
.hover-effect-enabled a {
  display: block;
  overflow: hidden;
}
.hover-effect-enabled a img, .hover-effect-enabled a picture > img {
  display: block;
  transition: all 300ms ease-in-out;
  transform: scale(1);
  opacity: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.hover-effect-enabled a:hover > img, .hover-effect-enabled a:hover > picture > img {
  opacity: 0.85;
  transform: scale(1.05);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Parallax

*/
.wp-block-cover.parallax-enabled.alignfull {
  margin-top: 0;
}

/*# sourceMappingURL=style.css.map*/