/* =============================================================================
   DCE
   ========================================================================== */

/* Link box */
.linkbox {
  --linkbox-bg: var(--c-neutral-lighter);
  position: relative;
  margin-bottom: 1em;
  background: rgb(var(--linkbox-bg));
  transition: background 0.3s ease;
}

.frame-bg-grey .linkbox {
  --linkbox-bg: var(--c-neutral-lightest);
}

.linkbox__inner {
  display: block;
  padding: 20px;
}

.linkbox.-withLink .linkbox__inner {
  padding-right: 60px;
}

.linkbox.-withLink > .linkbox__inner::after {
  content: none;
}

.linkbox.-withLink .linkbox__inner::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 22px;
  height: 50px;
  margin-top: -25px;
  background-color: rgb(var(--c-primary));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='279.8 -0.3 22.4 50.6'%3E%3Cpolyline points='280.3,49.8 301.5,25 280.3,0.2' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3C/svg%3E") no-repeat center / contain;
}

.linkbox__title {
  margin-bottom: 0.2em;
  font-size: var(--f-size-l-2);
  line-height: 1.3;
  color: rgb(var(--c-primary));
}

.linkbox__subtitle {
  color: rgb(var(--c-neutral-dark));
}

.linkbox__title p,
.linkbox__subtitle p {
  margin: 0;
}

@media (hover: hover) {
  .linkbox.-withLink:hover {
    --linkbox-bg: var(--c-primary);
  }

  .linkbox.-withLink:hover .linkbox__title,
  .linkbox.-withLink:hover .linkbox__subtitle {
    color: rgb(var(--c-neutral-lightest));
  }

  .linkbox.-withLink:hover .linkbox__inner::before {
    background-color: rgb(var(--c-neutral-lightest));
  }
}

/* Background image */
.frame-type-col1-100:has(> .container__background) {
  position: relative;
}

.container__background {
  display: none;
  grid-column: 1 / -1;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.container__background .frame {
  position: static;
  padding: 0;
}

.container__background ~ .grid__col {
  position: relative;
  z-index: 1;
}

.bgImage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bgImage.-cover {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bgImage.-repeat {
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 641px) {
  .container__background {
    display: block;
  }

}