/* -------------------------------- variables ------------------------------- */
:root {
  --image-boxes-display-type: grid;
  --image-boxes-normal-height: 141vh;
  --image-boxes-normal-height-small: 76.04vh;
  --image-boxes-normal-columns: 1fr 1fr 1fr;
  --image-boxes-normal-rows: 3.93fr 3.93fr 33.59fr 2.62fr 1.96fr 2.62fr 5.24fr 2.62fr 32.48fr 1.12fr 9.84fr;
  --image-boxes-normal-rows-small: 7.29fr 7.29fr 62.28fr 4.86fr 3.64fr 4.86fr 9.73fr;
  --image-boxes-normal-grid-gap: 0 2rem;
  --image-boxes-highlight-btn-height: 128vh;
  --image-boxes-highlight-btn-rows: 5.78fr .36fr 12.45fr 7.63fr 21.6fr 2.89fr 2.89fr 2.89fr 21.89fr 17.99fr 3.61fr;
  --image-boxes-highlight-btn-columns: 1fr 1fr 1fr;
  --image-boxes-highlight-btn-grid-gap: 0 2rem;
  --image-boxes-one-row-main-gap: 2rem;
}

.wso-section-image-boxes {
  /* --------------------------------- normal --------------------------------- */
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes {
  height: var(--image-boxes-normal-height) !important;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner {
  display: var(--image-boxes-display-type);
  height: var(--image-boxes-normal-height) !important;
  grid-template-columns: var(--image-boxes-normal-columns);
  grid-template-rows: var(--image-boxes-normal-rows);
  grid-gap: var(--image-boxes-normal-grid-gap);
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :first-child {
  grid-area: 1/1/5/2;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(2) {
  grid-area: 3/2/8/3;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(3) {
  grid-area: 2/3/4/4;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(4) {
  grid-area: 7/1/10/2;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(5) {
  grid-area: 9/2/12/3;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(6) {
  grid-area: 5/3/11/4;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes:not(:has(:nth-child(4))) {
  height: var(--image-boxes-normal-height-small) !important;
}
.wso-section-image-boxes.wso-img-box-layout-default .wso-wrap-image-boxes:not(:has(:nth-child(4))) .mcb-wrap-inner {
  height: var(--image-boxes-normal-height-small) !important;
  grid-template-rows: var(--image-boxes-normal-rows-small) !important;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes {
  height: var(--image-boxes-highlight-btn-height) !important;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner {
  display: var(--image-boxes-display-type);
  height: var(--image-boxes-highlight-btn-height) !important;
  grid-template-columns: var(--image-boxes-highlight-btn-columns);
  grid-template-rows: var(--image-boxes-highlight-btn-rows);
  grid-gap: var(--image-boxes-highlight-btn-grid-gap);
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :first-child {
  grid-area: 2/1/8/2;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(2) {
  grid-area: 1/2/6/3;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(3) {
  grid-area: 3/3/4/4;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(4) {
  grid-area: 9/1/11/2;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(5) {
  grid-area: 7/2/12/3;
}
.wso-section-image-boxes.wso-img-box-layout-highlightbutton .wso-wrap-image-boxes .mcb-wrap-inner > :nth-child(6) {
  grid-area: 5/3/10/4;
}
.wso-section-image-boxes.wso-img-box-layout-one-row .wso-wrap-image-boxes .mcb-wrap-inner {
  display: flex;
  flex-direction: row;
  gap: var(--image-boxes-one-row-main-gap);
}

@media only screen and (max-width: 1239px) {
  :root {
    --image-boxes-normal-height: 100vh;
    --image-boxes-normal-columns: 1fr 1fr 1fr;
    --image-boxes-normal-rows: 3.93fr 3.93fr 33.59fr 2.62fr 1.96fr 2.62fr 5.24fr 2.62fr 32.48fr 1.12fr 9.84fr;
    --image-boxes-normal-grid-gap: 0 2rem;
    --image-boxes-highlight-btn-height: 80vh;
    --image-boxes-highlight-btn-rows: 5.78fr .36fr 12.45fr 7.63fr 21.6fr 2.89fr 2.89fr 2.89fr 21.89fr 17.99fr 3.61fr;
    --image-boxes-highlight-btn-columns: 1fr 1fr 1fr;
    --image-boxes-highlight-btn-grid-gap: 0 2rem;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 600px) {
  :root {
    --image-boxes-normal-height: 80vh;
    --image-boxes-normal-height-small: 43.13vh;
    --image-boxes-highlight-btn-height: 70vh;
  }
}
@media only screen and (max-width: 767px) {
  :root {
    --image-boxes-display-type: flex;
    --image-boxes-normal-height: auto;
    --image-boxes-highlight-btn-height: auto;
    --image-boxes-normal-height-small: auto;
  }
  .wso-section-image-boxes .mcb-wrap-inner {
    flex-direction: column !important;
    gap: 2rem;
  }
  .wso-section-image-boxes .mcb-wrap-inner .image_wrapper {
    height: 25rem !important;
  }
}