/* -------------------------------- variables ------------------------------- */
:root {
  --two-col-section-width: 96.87vw;
  --two-col-section-gap: 1.6rem;
  --two-col-section-flex-direction: row;
  --two-col-col-padding-horizontal: .8rem;
  --two-col-col-padding-top: .8rem;
  --two-col-col-padding-bottom: 1.92rem;
  --two-col-col-border: 2px solid var(--color-1);
  --two-col-col-gap: 1.92rem;
  --two-col-col-img-height: 37.15rem;
  --two-col-col-img-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
}

/* --------------------------------- section -------------------------------- */
.section.wso-section-two-columns .section_wrapper {
  max-width: var(--two-col-section-width) !important;
  display: flex;
  flex-direction: var(--two-col-section-flex-direction);
  gap: var(--two-col-section-gap);
}
.section.wso-section-two-columns .section_wrapper::after {
  display: none !important;
}
.section.wso-section-two-columns .section_wrapper .column_attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--two-col-col-gap);
  padding: var(--two-col-col-padding-top) var(--two-col-col-padding-horizontal) var(--two-col-col-padding-bottom);
  border: var(--two-col-col-border);
}
.section.wso-section-two-columns .section_wrapper .column_attr::after, .section.wso-section-two-columns .section_wrapper .column_attr::before {
  display: none !important;
}
.section.wso-section-two-columns .section_wrapper .column_attr .image_wrapper {
  position: relative;
  height: var(--two-col-col-img-height);
  width: 100% !important;
  overflow: hidden;
}
.section.wso-section-two-columns .section_wrapper .column_attr .image_wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background: var(--two-col-col-img-overlay); */
}
.section.wso-section-two-columns .section_wrapper .column_attr .image_wrapper img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  transition: var(--transition-normal) ease-in-out;
}
.section.wso-section-two-columns .section_wrapper .column:hover .image_wrapper img {
  scale: 1.1;
}

/* ------------------------------- responsive ------------------------------- */
@media only screen and (max-width: 1499px) {
  :root {
    --two-col-col-img-height: 30.15rem;
  }
}
@media only screen and (max-width: 767px) {
  :root {
    --two-col-section-width: var(--content-width);
    --two-col-section-gap: 1.5rem;
    --two-col-section-flex-direction: column;
    --two-col-col-padding-horizontal: 1rem;
    --two-col-col-padding-top: 1rem;
    --two-col-col-padding-bottom: 2rem;
    --two-col-col-gap: 2rem;
    --two-col-col-img-height: 25rem;
  }
}