/* -------------------------------- variables ------------------------------- */
:root {
  --image-box-gap: 1rem;
  --image-box-padding-bottom: 1.4rem;
  --image-box-padding-top: 1rem;
  --image-box-padding-vertical: 1rem;
  --image-box-title-pb: .5rem;
  --image-box-hover-text-pb: 1.1rem;
  --image-box-hover-fs: 2.82rem;
  --image-box-hover-lh: 1.1em;
  --image-box-hover-tt: uppercase;
  --image-boxes-one-row-img-height: 27.61rem;
  --image-boxes-one-row-wrapper-gap: 1.44rem;
  --image-boxes-one-row-content-height: 3.4rem;
}

/* ---------------------------------- card ---------------------------------- */
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box {
  height: 100%;
  width: 100% !important;
  transition: var(--transition-normal) ease-in-out;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame {
  position: relative;
  height: 100%;
  width: 100%;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame:has(> .image_wrapper),
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame a {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  gap: var(--image-box-gap);
  padding: var(--image-box-padding-top) var(--image-box-padding-vertical) var(--image-box-padding-bottom);
  border: 2px solid var(--color-1);
  text-decoration: unset !important;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .image_wrapper {
  height: 100%;
  width: 100%;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .image_wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 28.36%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-normal) ease-in-out;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .image_wrapper .wso-hover-text {
  font-size: var(--image-box-hover-fs) !important;
  line-height: var(--image-box-hover-lh) !important;
  position: absolute;
  color: var(--color-white) !important;
  bottom: var(--image-box-hover-text-pb);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  opacity: 0;
  transition: var(--transition-normal) ease-in-out;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .wp-caption-text {
  position: relative !important;
  bottom: unset;
  left: unset;
  color: unset;
  background: unset;
  padding: unset !important;
  width: 100%;
  display: flex;
  justify-content: center;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .wp-caption-text .wso-h3 {
  position: relative;
  width: fit-content;
  padding-bottom: var(--image-box-title-pb);
  transition: var(--transition-normal) ease-in-out;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .wp-caption-text .wso-h3::after {
  content: "";
  display: block;
  width: 92.15%;
  height: 4px;
  position: absolute;
  left: 50%;
  bottom: calc(0rem - 2px);
  background-color: var(--color-1);
  transform: translateX(-50%);
  transition: var(--transition-normal) ease-in-out;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box.wso-highlight-button {
  width: 9.34rem !important;
  justify-self: flex-end;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box.wso-highlight-button img {
  object-fit: contain;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box.wso-highlight-button:first-child {
  align-self: flex-end;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover {
  background-color: var(--color-2);
}
#Wrapper .wso-img-box-layout-one-row .wso-img-box {
  width: auto !important;
  flex-basis: 100%;
}
#Wrapper .wso-img-box-layout-one-row .wso-img-box .image_frame {
  display: flex;
  flex-direction: column;
  gap: var(--image-boxes-one-row-wrapper-gap);
}
#Wrapper .wso-img-box-layout-one-row .wso-img-box .image_frame .image_wrapper {
  height: var(--image-boxes-one-row-img-height);
}
#Wrapper .wso-img-box-layout-one-row .wso-img-box .image_frame .wp-caption-text {
  width: 100%;
  padding: 0 !important;
  inset: unset !important;
  position: relative;
  background: unset !important;
  background-color: unset !important;
  text-align: left;
  border: unset;
}
#Wrapper .wso-img-box-layout-one-row .wso-img-box .image_frame .wp-caption-text .wso-h3 {
  font-size: var(--h5-font-size) !important;
  line-height: var(--h5-line-height) !important;
  text-transform: var(--h5-text-transform) !important;
  font-weight: var(--h5-font-weight) !important;
  letter-spacing: var(--h5-letter-spacing) !important;
}

#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover {
  background-color: var(--color-1);
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .wso-h3 {
  color: var(--color-white) !important;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .wso-h3::after {
  background-color: var(--color-white) !important;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .image_wrapper:before {
  opacity: 1;
}
#Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .wso-hover-text {
  opacity: 1 !important;
}

@media only screen and (max-width: 1023px) {
  :root {
    --image-boxes-one-row-img-height: 17.61rem;
  }
}
@media only screen and (max-width: 767px) {
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover {
    background-color: transparent;
  }
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .wso-h3::after {
    background-color: var(--color-1) !important;
  }
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button):hover .wso-h3 {
    color: var(--color-1) !important;
  }
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame img {
    transform: scale(1);
  }
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box .image_frame .image_wrapper:before,
  #Wrapper .section:not(.wso-img-box-layout-one-row) .wso-img-box:not(.wso-highlight-button) .wso-hover-text {
    opacity: 1 !important;
  }
}