/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/* ------------------------------------ *\
  #BOX-VISITA-GUIDATA
\* ------------------------------------ */
.opd-box-visita-guidata {
  --box-visita-display: grid;
  --_box-visita-areas: var(--box-visita-areas, " ");
  --_box-visita-columns: var(--box-visita-columns, " ");
  --box-visita-background-color: #752E4A;
  --box-visita-text-background-image: var(--decoration-logo-semitransparent);
  --box-visita-text-background-position: right bottom;
  --box-visita-text-color: #ffffff;
  --_box-visita-image-area: var(--box-visita-image-area, " ");
  --_box-visita-image-aspect-ratio: var(--box-visita-image-aspect-ratio, 7/5);
  --_box-visita-text-area: var(--box-visita-text-area, " ");
  --_box-visita-text-padding: var(--box-visita-text-padding, clamp(1.25rem,2vw,2.5rem));
  --_box-visita-cta-width: var(--box-visita-cta-width, " ");
  --_box-visita-cta-justify-self: var(--box-visita-cta-justify-self, " ");
  display: var(--box-visita-display);
  grid-template-areas: var(--_box-visita-areas);
  background-color: var(--box-visita-background-color);
  color: var(--box-visita-text-color);
}
.opd-box-visita-guidata__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: var(--_box-visita-image-aspect-ratio);
  grid-area: var(--_box-visita-image-area);
}
.opd-box-visita-guidata__text {
  display: grid;
  -ms-flex-line-pack: start;
      align-content: start;
  gap: clamp(1.25rem,2vw,2.5rem);
  grid-area: var(--_box-visita-text-area);
  padding: var(--_box-visita-text-padding);
  background: transparent var(--box-visita-text-background-image) var(--box-visita-text-background-position) no-repeat;
  font-size: clamp(0.75rem, 1rem + 1.5vw, 0.875rem);
}
.opd-box-visita-guidata__cta {
  width: var(--_box-visita-cta-width);
  justify-self: var(--_box-visita-cta-justify-self);
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (min-width: 768px) {
  .opd-box-visita-guidata {
    --_box-visita-areas: "image image image text text";
    --box-visita-image-area: image;
    --box-visita-text-area: text;
    --box-visita-cta-width: 60%;
    --box-visita-cta-justify-self: end;
  }
  .opd-box-visita-guidata .opd-list-label-value {
    --list-item-value-flex: 0 0 var(--box-visita-cta-width);
  }
}