.hs-header {
  height: 640px;
  display: flex;

  .hs-aside {
    width: 20vw;
    padding: 0.5rem;
  }

  .hs-slider {
    width: 80vw;
  }
}

@media (max-width: 639px) {
  .hs-header {
    flex-direction: column;
    height: auto;

    .hs-aside,
    .hs-slider {
      width: 100vw;
      .carousel-item {
        .carousel-caption {
          width: auto;
          margin: 0;
          padding: 0;
        }
      }
    }
  }
}

#hsCarousel {
  position: relative;
  height: 640px;

  .carousel-item {
    position: relative;

    .carousel-image {
      width: 100%;
      height: 640px;
      object-fit: cover;
      object-position: center;
    }

    .carousel-caption {
      position: absolute;
      border-radius: 2rem 2rem 0 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      left: 25%;
      right: 25%;
      top: auto;
      bottom: 0rem;
      width: 50%;
      height: 75%;
      background: linear-gradient(#0360, #0366);
      padding: 1rem;
      /* border: 1px solid #069; */
      color: #efefef;

      .btn {
        background: #069;
        color: #fff;
        font-size: 1.25rem;
        transition: all 0.2s ease-in-out;
        padding: 0.5rem;
      }

      .btn:hover {
        background: #039;
        padding: 0.5rem 2rem 0.5rem 2rem;
      }
    }
  }

  .carousel-indicators {
    right: auto;
    left: auto;
    bottom: 4rem;
    margin: 0;
    height: 2rem;
    width: 8rem;
    padding: 0.75rem;
    z-index: 102;

    button[data-bs-target] {
      background: #fff;
      height: 0.75rem;
      width: 0.75rem;
      margin-right: 0.25rem;
      padding: 0;
      border: 1px solid #333;
      border-radius: 50%;
    }

    button[data-bs-target].active {
      background: #333;
    }
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 4rem !important;
    height: 4rem !important;
    margin: 0;
    padding: 0;
    bottom: 0;
    top: auto;
    right: auto;
    left: auto;
    z-index: 102;
  }

  .carousel-control-prev {
    left: 0;
    bottom: 0 !important;
  }

  .carousel-control-next {
    left: 4rem;
    bottom: 0 !important;
  }
}
@media (max-width: 821px) {
  #hsCarousel {
    .carousel-item {
      .carousel-caption {
        width: 100%;
      }
    }
  }
}

@media (max-width: 641px) {
  #hsCarousel {
    .carousel-item {
      .carousel-caption {
        top: 1rem;
        left: 1rem;
        right: 1rem;
        width: Calc(100vw - 3rem);
        height: auto;
        bottom: 6rem;
        box-shadow: 0px 0px 10px #0001;
        /*left: 0;
        right: 0;
        top: 1rem;
        bottom: 5rem;
        width: Calc(100% -4rem);*/
      }
    }
  }
}

#featured_brand {
  background: #efefef;
  border-top: 1px solid #0001;
  border-bottom: 1px solid #0001;
  margin-bottom: 1rem;
}

.brand_grid {
  display: grid;
  gap: 0;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);

  .grid-item {
    position: relative;

    img {
      /* border: 1px solid #FFF2; */
      opacity: 1;
      object-fit: cover;
      object-position: center center;
    }

    .grid-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0000;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease-in-out;
      padding: 0.5rem;
      grid-auto-flow: dense;

      h3,
      h5,
      a {
        margin: 0;
        opacity: 0;
        text-align: center;
      }

      h3 {
        transition: all 0.2s ease-in-out;
        font-size: 1.75rem;
      }

      h5 {
        transition: all 0.4s ease-in-out;
        font-size: 1.25rem;
        font-weight: normal;
      }

      a {
        transition: all 0.6s ease-in-out;
      }
    }
  }

  /*
        .grid-item:hover {
            .grid-content {
                opacity: 1;
                backdrop-filter: blur(3px) saturate(0.5);
                background: #0008;

                h3 {
                    opacity: 1;
                }

                h5 {
                    opacity: 1;
                }

                a {
                    opacity: 1;
                }

            }


        }
        */
  .p1 .grid-content {
    h3 {
      opacity: 1;
    }

    h5 {
      opacity: 1;
    }

    a {
      opacity: 1;
    }
  }

  .p1:hover .grid-content {
    backdrop-filter: none;
    background: transparent;
  }

  .p1 {
    grid-column: span 6;
    grid-row: span 4;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .p2,
  .p3 {
    grid-column: span 3;
    grid-row: span 2;

    img {
      width: 100%;
      height: 100%;
    }

    .grid-content {
      h3 {
        font-size: 1.5rem;
      }

      h5 {
        font-size: 1.25rem;
      }

      a {
        font-size: 1rem;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 2;
    grid-row: span 2;

    img {
      width: 100%;
      height: 100%;
    }

    .grid-content {
      h3 {
        font-size: 1.25rem;
      }

      h5 {
        font-size: 1rem;
      }

      a {
        font-size: 0.85rem;
      }
    }
  }
}

@media (max-width: 720px) {
  .grid4 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, 1fr);
  }

  .p1 {
    grid-column: span 3;
  }

  .p2,
  .p3 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: none !important;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: none !important;
      }
    }
  }
}

@media (max-width: 1200px) {
  .brand_grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }

  .p1 {
    grid-column: span 6;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }

  .p2,
  .p3 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 2;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }
}
.swProduct1 {
  .swiper-button-prev::after,
  .swiper-button-next::after {
    color: #039;
    background: #fff;
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    border: 1px solid #3339;
  }

  .swiper-button-next:hover::after,
  .swiper-button-prev:hover::after {
    color: #fff;
    background: #039;
    padding-left: 2rem;
    padding-right: 2rem;
    border-color: #fff9;
  }

  .swiper-button-prev::after {
    border-radius: 0 0.5rem 0.5rem 0;
  }

  .swiper-button-next::after {
    border-radius: 0.5rem 0 0 0.5rem;
  }
}
.banner-items {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);

  .banner-item {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      transition: all 0.3s ease-in-out;
      transform: scale(1);
      object-fit: cover;
      object-position: center bottom;
    }

    .banner-content {
      opacity: 0;
      left: auto;
      right: -50%;
      text-align: center;
      padding: 1rem;
      transition: all 0.3s ease-in-out;
      position: absolute;
      top: 0%;
      width: 50%;
      height: 100%;
      background: #0000;
      text-shadow: 0px 1px 2px #0009;

      .alink {
        color: #fff;
      }
    }
  }

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

    .banner-content {
      opacity: 1;
      right: 0;
      display: block;
      background: #0009;
      text-shadow: 0px 1px 2px #0000;
    }
  }
}

@media screen {
  @media (max-width: 720px) {
    .banner-items {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}
.grid1 {
  margin: 0 auto;
  display: grid;
  padding: 1rem;
  gap: 1rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, 1fr);

  div {
    background: #ccc;
    padding: 0;
    text-align: center;
    min-height: 256px;
    position: relative;
    border: 1px solid #0001;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      grid-row: 1;
      filter: saturate(1);
      transition: all 0.5s ease-in-out;
      transform: scale(1.25);
    }

    .caption {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      background: linear-gradient(#fffc, #fff8);
      transition: all 0.5s ease-in-out;
      opacity: 0;
    }
  }

  div:hover {
    img {
      filter: saturate(0);
      transform: scale(1);
    }

    .caption {
      opacity: 1;
      backdrop-filter: blur(3px);
    }
  }

  .a1,
  .a2,
  .a5,
  .a6,
  .a7,
  .a8 {
    grid-column: span 1;
  }

  .a3,
  .a4,
  .a9 {
    grid-column: span 2;
  }
}

@media (max-width: 996px) {
  .grid1 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid1 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.grid4 {
  display: grid;
  gap: 0;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);

  .grid-item {
    position: relative;

    img {
      /* border: 1px solid #FFF2; */
      opacity: 1;
      object-fit: cover;
      object-position: center center;
    }

    .grid-content {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0000;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease-in-out;
      padding: 0.5rem;
      grid-auto-flow: dense;

      h3,
      h5,
      a {
        margin: 0;
        opacity: 0;
        text-align: center;
      }

      h3 {
        transition: all 0.2s ease-in-out;
        font-size: 1.75rem;
      }

      h5 {
        transition: all 0.4s ease-in-out;
        font-size: 1.25rem;
        font-weight: normal;
      }

      a {
        transition: all 0.6s ease-in-out;
      }
    }
  }

  .grid-item:hover {
    .grid-content {
      opacity: 1;
      backdrop-filter: blur(3px) saturate(0.5);
      background: #0008;

      h3 {
        opacity: 1;
      }

      h5 {
        opacity: 1;
      }

      a {
        opacity: 1;
      }
    }
  }

  .p1 {
    grid-column: span 6;
    grid-row: span 4;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .p2,
  .p3 {
    grid-column: span 3;
    grid-row: span 2;

    img {
      width: 100%;
      height: 100%;
    }

    .grid-content {
      h3 {
        font-size: 1.5rem;
      }

      h5 {
        font-size: 1.25rem;
      }

      a {
        font-size: 1rem;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 2;
    grid-row: span 2;

    img {
      width: 100%;
      height: 100%;
    }

    .grid-content {
      h3 {
        font-size: 1.25rem;
      }

      h5 {
        font-size: 1rem;
      }

      a {
        font-size: 0.85rem;
      }
    }
  }
}

@media (max-width: 720px) {
  .grid4 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, 1fr);
  }

  .p1 {
    grid-column: span 3;
  }

  .p2,
  .p3 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: none !important;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: none !important;
      }
    }
  }
}

@media (max-width: 1200px) {
  .grid4 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }

  .p1 {
    grid-column: span 6;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }

  .p2,
  .p3 {
    grid-column: span 3;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }

  .p4,
  .p5,
  .p6 {
    grid-column: span 2;

    .grid-content {
      h5 {
        display: block;
      }
    }
  }
}