.wrapper--banners {
  padding: 0 calc(var(--padding-section-base) * 8) 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.banner-item {
  flex: 1;
  border-radius: var(--br-30);
  overflow: hidden;
  position: relative;
}
/* .banner-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  background-image: radial-gradient(#12121500 0%, #1212157d 70%);
  z-index: 1;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: 0.4s var(--ease2);
} */
.banner-item img {
  width: 100%;
  transition: 0.4s var(--ease2);
}
/* .hover-banner {
  background-image: linear-gradient(to left, #ffffff, #dddce5);
  -webkit-mask-image: url(../../../img/masks/curve-left3.svg);
  mask-image: url(../../img/masks/curve-left3.svg);
  width: 1.3rem;
  height: 9.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -0.5px;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%) translateX(0.5rem);
  pointer-events: none;
  opacity: 0;
  transition: 0.4s var(--ease2);
  transform-origin: right;
} */
/* .hover-banner::before {
  content: "";
  background-image: url(../../img/logos/logo-text.svg);
  transform: rotate(90deg) scale(1) translateY(-1px);
  position: absolute;
  width: 4rem;
  height: 1.3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
} */
/* .banner-item:hover .hover-banner {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
} */
/* .banner-item:hover img {
  scale: 1.05;
}
.banner-item:hover::before {
  opacity: 1;
} */
/* grid banners */
.grid {
  display: grid;
}

.g--aboutsingle {
  grid-template-columns: 9.6fr 3fr;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 5.6rem;
}

.g--steps {
  grid-template-columns: 4fr 8.3fr;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 5.6rem;
  align-items: start;
  padding-top: 5.6rem;
}

.g--2fit-cols {
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
}

.g--1-cols {
  grid-template-columns: 1fr;
  row-gap: 5.6rem;
}

.g--5-7-cols {
  grid-template-columns: 5fr 7fr;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 5.6rem;
}

.g--7-5-cols {
  grid-template-columns: 7fr 5fr;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 5.6rem;
}

.g--cart-blog {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 3rem;
}

.g--third-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 3rem;
}

.g--4-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 3rem;
}

.g--3fit-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  row-gap: 3rem;
}

.g--3-10-cols {
  grid-template-columns: 3fr 10fr;
  row-gap: 1.8rem;
  align-items: center;
}

.g--third2-cols {
  grid-template-columns: 1fr 2fr 1fr;
  row-gap: 3rem;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
}

.g--blog {
  grid-template-columns: 4fr 8.4fr;
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  align-items: start;
}

.g--full {
  grid-column: 1/-1;
}

.g--right {
  grid-row: 1/-1;
  grid-column: 2/-1;
}

.g--content-cols,
.g--half-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(2, 1fr);
}

.g--fourv1-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a b c" "d d c";
}

.g--five-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "a a a b b b" "c c d d e e";
}

.g--ver-third-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "a a" "b c";
}

.g--unfair-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "a a a a" "b c d d";
}

.g--unfair-cols .place_a,
.g--ver-third-cols .place_a,
.g--five-cols .place_a,
.g--third-half-cols .place_a,
.g--zigzag-cols .place_a,
.g--fourv2-cols .place_a,
.g--fourv1-cols .place_a {
  grid-area: a;
}

.g--unfair-cols .place_b,
.g--ver-third-cols .place_b,
.g--five-cols .place_b,
.g--third-half-cols .place_b,
.g--zigzag-cols .place_b,
.g--fourv2-cols .place_b,
.g--fourv1-cols .place_b {
  grid-area: b;
}

.g--unfair-cols .place_c,
.g--ver-third-cols .place_c,
.g--five-cols .place_c,
.g--third-half-cols .place_c,
.g--zigzag-cols .place_c,
.g--fourv2-cols .place_c,
.g--fourv1-cols .place_c {
  grid-area: c;
}

.g--unfair-cols .place_d,
.g--five-cols .place_d,
.g--zigzag-cols .place_d,
.g--fourv2-cols .place_d,
.g--fourv1-cols .place_d {
  grid-area: d;
}

.g--five-cols .place_e,
.g--fourv2-cols .place_e {
  grid-area: e;
}

.g--fourv2-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a b c" "d e c";
}

.g--zigzag-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a b b" "c c d";
}

.g--third-half-cols {
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "a b" "c c";
}

/**************************/
/* BELOW 800px */
/**************************/
@media (max-width: 50em) {
  .g--unfair-cols,
  .g--ver-third-cols,
  .g--five-cols,
  .g--third-half-cols,
  .g--zigzag-cols,
  .g--fourv2-cols,
  .g--half-cols,
  .g--third-cols,
  .g--third2-cols,
  .g--fourv1-cols {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }
  .g--4-cols {
    grid-template-columns: 1fr;
  }

  .g--five-cols,
  .g--fourv2-cols {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
  }

  .g--unfair-cols,
  .g--zigzag-cols,
  .g--fourv1-cols {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
  }

  .g--ver-third-cols,
  .g--third-half-cols {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c";
  }
  .g--half-cols,
  .g--third-cols,
  .g--third2-cols {
    grid-template-columns: 1fr;
  }
}
/**************************/
/* BELOW 576px */
/**************************/
@media (min-width: 36em) {
  .banner-items {
    flex-direction: row;
  }
}