.wrapper--banners {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.banner-item {
  position: relative;
  display: block;
}

.banner-item img {
  border-radius: 4rem;
  width: 100%;
  transition: 0.4s var(--ease2);
  background-color: var(--bg-img);
}

.banner-item:after {
  content: "";
  background: rgb(255 255 255 / 1%) none repeat scroll 0 0;
  inset: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
  transition: all 700ms ease 0s;
  -webkit-transition: all 700ms ease 0s;
  border: 1px solid var(--c-white);
  border-radius: 4rem;
}

/* 
.banner-item :before {
  content: "";
  background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
  inset: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
  transition: all 700ms ease 0s;
  -webkit-transition: all 700ms ease 0s;
} */

.desktop .banner-item :hover:before {
  /* left: 50%; */
  /* opacity: 1; */
  /* right: 50%; */
}

.desktop .banner-item:hover img {
  transform: scale(0.99);
}

.desktop .banner-item:hover:after {
  /* bottom: 50%; */
  opacity: 1;
  inset: 1rem;
  border-radius: 3rem;
  /* top: 50%; */
}

/* .banner-item {
  flex: 1;
  border-radius: 4rem;
  overflow: hidden;
  position: relative;
}

.banner-item img {
  width: 100%;
  transition: 0.4s var(--ease2);
} */

.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";
}

@media (width<1024px) {

  /* mobile */
  .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;
  }
}