/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/block/Link/style.css ***!
  \*************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

[name='Link'] {
  border-radius: 10px;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 25%));
  padding: 12px 12px 24px;
  height: 100%;
  transition: filter var(--transition-duration, 0.3s)
    var(--transition-timing-function, ease);
}

[name='Link'] .link-wrapper {
    text-decoration: none;
  }

/* Image containers */

[name='Link'] .image-desktop,
  [name='Link'] .image-desktop-only {
    display: block;
  }

@media screen and (width < 768px) {

[name='Link'] .image-desktop,
  [name='Link'] .image-desktop-only {
      display: none
  }
    }

[name='Link'] .image-mobile,
  [name='Link'] .image-mobile-only {
    display: none;
  }

@media screen and (width < 768px) {

[name='Link'] .image-mobile,
  [name='Link'] .image-mobile-only {
      display: block
  }
    }

/* Square image - displays on all devices */

[name='Link'] .image-square {
    display: block;
  }

/* When both images exist */

@media screen and (width >= 768px) {

[name='Link'] .image-desktop {
      display: block
  }
    }

@media screen and (width < 768px) {

[name='Link'] .image-mobile {
      display: block
  }
    }

/* Image styling */

[name='Link'] figure img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
    }

/* Content area */

[name='Link'] .content {
    display: flex;
    gap: 8px;
    padding-inline: 12px;
    align-items: flex-end;
    justify-content: space-between;
  }

[name='Link'] .text > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

[name='Link'] .text > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

[name='Link'] .text > h2,
  [name='Link'] .text > h3,
  [name='Link'] .text > h4,
  [name='Link'] .text > h5,
  [name='Link'] .text > h6 {
    margin-block-start: 0;
  }

[name='Link'] .text .wp-block-heading {
      margin-block: 16px 8px;
    }

[name='Link'][data-theme='three'] .button-icon {
      background-color: #98c6e5;
    }

[name='Link'][data-theme='four'] .button-icon {
      background-color: #78ae70;
    }

[name='Link'][data-theme='five'] .button-icon {
      background-color: #efd95e;
    }

[name='Link'] .button-icon {
    transition: background-color var(--transition-duration)
      var(--transition-timing-function);
  }

[name='Link'] .button-icon:hover {
      background-color: var(--clr-black);
    }


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