#highlights {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: auto !important;
}

.highlight {
  position: relative;
  width: 100%;
  display: block;
  height: auto !important;
  text-align: center;
  color: #fff;
  font-size: 48px;
  text-decoration: underline;
}

.widthContainer {
  width: 100%;
}

#imageGroupTitle {
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 50px;
  margin-bottom: 25px;
  color: #333234;
  text-align: center;
}

.slick-dots {
  bottom: 20px !important;
}

.blogPostTitle {
  margin-top: 1rem;
}

.slick-dots li button:before {
  border: 1px solid #fff !important;
  border-radius: 100px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #fff !important;
  color: transparent !important;
  opacity: 0.5 !important;
  font-size: 0 !important;
}

.slick-dots li {
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px !important;
}

.slick-dots li button {
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
}

.slick-dots li.slick-active button:before {
  opacity: 1 !important;
  /*border: 3px solid #fff !important;*/
  /*margin-top: -2px !important;*/
}

.blogsContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 95%;
  margin: 0 auto 6rem;
  gap: 4.5rem;
}

.blogs {
  width: 100%;
  position: relative;
  height: auto;
  display: block;
  overflow: hidden;
}
.group-look-slider{
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  #imageGroups {
    width: 100%;
  }

  .blogsContainer {
    display: block;
    width: 100%;
  }

  .blogPostRegular {
    margin: 0 10px !important;
  }

  .blogRightArrow,
  .blogLeftArrow {
    position: absolute;
    top: calc(50% - 68px);
    z-index: 1;
    width: 15px;
    object-fit: contain;
    height: 15px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    background: var(--white);
    padding: 1rem;
  }

  .blogRightArrow {
    right: 33px;
  }

  .blogLeftArrow {
    left: 33px;
    -o-transition: all 0.2s ease-out;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .group-look-slider{
  margin-bottom: 20px;
}
}