.audacity--first--slide__wrapper {
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(12, 1fr);
  gap: 3vh;
  width: calc(100% - 6vh);
  height: calc(100% - 6vh);
  padding: 3vh;
  display: grid;
}

@media screen and (width <= 1028px) {
  .audacity--first--slide__wrapper {
    gap: 1.5vh;
    width: calc(100% - 3vh);
    height: calc(100% - 3vh);
    padding: 1.5vh;
  }
}

.audacity-text-hexagon-stroke {
  -webkit-clip-path: polygon(25% 15%, 75% 15%, 97% 50%, 75% 85%, 25% 85%, 3% 50%);
  clip-path: polygon(25% 15%, 75% 15%, 97% 50%, 75% 85%, 25% 85%, 3% 50%);
  background: #fff;
  grid-area: 1 / 1 / 4 / 4;
  justify-content: center;
  place-self: center;
  align-items: center;
  width: 310px;
  height: 360px;
  display: flex;
}

@media screen and (width >= 2000px) {
  .audacity-text-hexagon-stroke {
    width: 480px;
    height: 550px;
  }
}

@media screen and (width <= 1028px) {
  .audacity-text-hexagon-stroke {
    display: none;
  }
}

.audacity-text-hexagon {
  z-index: 4;
  -webkit-clip-path: polygon(25% 15%, 75% 15%, 97% 50%, 75% 85%, 25% 85%, 3% 50%);
  clip-path: polygon(25% 15%, 75% 15%, 97% 50%, 75% 85%, 25% 85%, 3% 50%);
  background: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 350px;
  display: flex;
  position: relative;
}

@media screen and (width >= 2000px) {
  .audacity-text-hexagon {
    width: 470px;
    height: 540px;
  }
}

@media screen and (width <= 1028px) {
  .audacity-text-hexagon {
    display: none;
  }
}

.audacity-text-hexagon-h1 {
  z-index: 5;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

@media screen and (width >= 2000px) {
  .audacity-text-hexagon-h1 {
    font-size: 1.6rem;
  }
}

@media screen and (width <= 1028px) {
  .audacity-text-hexagon-h1 {
    display: none;
  }
}

.audacity-text-hexagon-p {
  z-index: 5;
  color: #fff;
  font-size: 1.1rem;
}

@media screen and (width >= 2000px) {
  .audacity-text-hexagon-p {
    font-size: 1.5rem;
  }
}

@media screen and (width <= 1028px) {
  .audacity-text-hexagon-p {
    display: none;
  }
}

.audacity--first--area {
  background-image: url("audacity-tag.c0ec81dd.png");
  background-size: cover;
  grid-area: 1 / 4 / 6 / 7;
}

@media screen and (width <= 1028px) {
  .audacity--first--area {
    background-position: 20%;
    grid-area: 6 / 1 / 9 / 5;
  }
}

.audacity--second--area {
  background-image: url("audacity-lanyard-city.1d87f652.jpg");
  background-position: 50%;
  background-size: cover;
  grid-area: 1 / 7 / 3 / 13;
}

@media screen and (width <= 1028px) {
  .audacity--second--area {
    grid-area: 1 / 1 / 3 / 13;
  }
}

.audacity--third--area {
  background-image: url("audacity-full-hoodie.14fb17c2.jpg");
  background-position: 50%;
  background-size: cover;
  grid-area: 4 / 1 / 9 / 4;
}

@media screen and (width <= 1028px) {
  .audacity--third--area {
    display: none;
  }
}

.audacity--fourth--area {
  background-image: url("audacity-hoodie-grey.af594b94.jpg");
  background-position: 50%;
  background-size: cover;
  grid-area: 6 / 4 / 9 / 7;
}

@media screen and (width <= 1028px) {
  .audacity--fourth--area {
    grid-area: 3 / 1 / 6 / 5;
  }
}

.audacity--fifth--area {
  background-image: url("audacity-black-hoodie.96a1034b.jpg");
  background-position: 50%;
  background-size: cover;
  grid-area: 3 / 7 / 9 / 13;
}

@media screen and (width <= 1028px) {
  .audacity--fifth--area {
    grid-area: 3 / 5 / 9 / 13;
  }
}

.audacity-greydient {
  background: linear-gradient(0deg, #000 30%, #0000 100%);
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
  position: absolute;
  bottom: 0;
}

.audacity-learn-more {
  flex-direction: column;
  width: auto;
  transition: all 2s ease-in-out;
  display: flex;
}

.audacity-learn-more:hover .audacity-learn-more-text, .audacity-learn-more:hover .audacity-arrow {
  color: #2ed2ef;
  transform: scale(1.05);
}

.audacity-learn-more-text {
  color: #fff;
  margin: 0;
  padding: 10px 0 0;
  font-size: .8em;
  transition: all 1s ease-in-out;
  transform: scale(1);
}

.audacity-arrow {
  color: #fff;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 1em;
  transition: all 1s ease-in-out;
  animation: 4s ease-in-out infinite arrowBounce;
  transform: scale(1);
}

.audacity--second--slide__wrapper {
  flex-direction: column;
  padding: 3vh;
  display: flex;
}

.audacity-ss-greydient {
  background: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  display: flex;
  position: absolute;
  bottom: 0;
}

.audacity-ss-learn-more {
  flex-direction: column;
  width: auto;
  transition: all 2s ease-in-out;
  display: flex;
}

.audacity-ss-learn-more:hover .audacity-ss-learn-more-text, .audacity-ss-learn-more:hover .audacity-arrow {
  color: #2ed2ef;
  transform: scale(1.05);
}

.audacity-ss-learn-more-text {
  color: #fff;
  margin: 0;
  padding: 10px 0 0;
  font-size: .8em;
  transition: all 1s ease-in-out;
  transform: scale(1);
}

.audacity--ss--title {
  color: #fff;
}

.audacity--ss--paragraph {
  color: #fff;
  font-size: 1.2rem;
}

.audacity-text-box {
  -webkit-backdrop-filter: blur(5px);
  background: #fff3;
  border: 2px solid #ffffff4d;
  border-radius: 16px;
  margin: 0 20vw;
  padding: 6vh;
  box-shadow: 0 4px 30px #0000001a;
}

.audacity--fourth--slide__wrapper {
  background: #fff;
  grid-template-rows: 65px auto;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: grid;
}

.fs-navbar-section {
  box-sizing: border-box;
  object-fit: contain;
  background: radial-gradient(circle, #333 10%, #000 80%);
  grid-area: 1 / 1 / 2 / 2;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-height: 65px;
  display: flex;
}

@media screen and (width <= 1000px) {
  .fs-navbar-section {
    justify-content: unset;
    background: none;
    flex-direction: row-reverse;
  }
}

.fs-navbar-logo {
  background-image: url("audacity-logo@2x-white.0b547b18.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: calc(100% - 23px);
  margin-top: 13px;
  margin-bottom: 10px;
  transform: translateX(-60px);
}

@media screen and (width <= 1000px) {
  .fs-navbar-logo {
    display: none;
  }
}

.fs-navbar-links {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 500;
}

@media screen and (width <= 1000px) {
  .fs-navbar-links {
    display: none;
  }
}

.hamburger-breakpoint {
  color: #0000;
  size: 0;
  display: none;
}

@media screen and (width <= 1000px) {
  .hamburger-breakpoint {
    color: #000;
    width: 50px;
    height: 50px;
    padding: 10px 5px 0 0;
    display: flex;
  }
}

.fs-shop-section {
  background: #fff;
  flex-direction: column;
  grid-area: 2 / 1 / 9 / 13;
  display: flex;
}

.fs-shop-title {
  color: #000;
  text-align: left;
  margin: 20px 0 0 20px;
  font-size: 1.8rem;
}

.fs-shop-container {
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

@media screen and (width <= 680px) {
  .fs-shop-container {
    flex-direction: column;
    display: flex;
  }
}

.fs-shop-item {
  box-sizing: border-box;
  background: #fff3;
  border: 1px solid #3333334d;
  border-radius: .5em;
  grid-template-rows: 55% auto auto auto;
  grid-template-columns: 1fr;
  width: 20%;
  height: 80%;
  padding: 20px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 4px 30px #0000003a;
}

@media screen and (width <= 1000px) {
  .fs-shop-item {
    width: 300px;
  }
}

@media screen and (width <= 680px) {
  .fs-shop-item {
    width: 300px;
  }
}

@media screen and (width <= 1000px) {
  .shop-item-gone-1000 {
    display: none;
  }
}

@media screen and (width <= 680px) {
  .shop-item-gone-680 {
    display: none;
  }
}

.fs-item-image-one {
  background-image: url("audacity-black-hoodie-fulllogo.b8492d42.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.fs-item-image-two {
  background-image: url("audacity-hoodie-full-grey-logoonly.6f29143f.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.fs-item-image-three {
  background-image: url("audacity-grey-hoodie-fulllogo.93a96fdc.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.fs-item-title {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

.fs-item-description {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.fs-item-price {
  font-size: 1rem;
}

@keyframes arrowBounce {
  40% {
    transform: translateY(-3px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-5px);
  }
}