.hexagon {
  background-size: cover;
  background-position: center;
  height: 90%;
  aspect-ratio: 0.8660254038;
  -webkit-clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
          clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  transform: rotateX(0deg) rotateY(25deg) translate(60px, 0px) skew(-10deg, 0deg);
  position: absolute;
  box-shadow: 15px 15px 50px inset #333;
}
@media screen and (max-width: 768px) {
  .hexagon {
    height: 90%;
    transform: rotateX(0deg) rotateY(25deg) translate(20px, 0px) skew(-10deg, 0deg);
  }
}

.hexagon-border {
  --b: 3px; /* adjust to control the border  */
  height: 90%;
  aspect-ratio: 0.8660254038;
  -webkit-clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), calc(100% - var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), 50% calc(100% - var(--b)), calc(var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), calc(var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), 50% var(--b));
          clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), calc(100% - var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), 50% calc(100% - var(--b)), calc(var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), calc(var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), 50% var(--b));
  transform: rotateX(0deg) rotateY(25deg) translate(60px, 0px) skew(-10deg, 0deg);
  background: radial-gradient(#111 61%, #fff 70%);
}
@media screen and (max-width: 768px) {
  .hexagon-border {
    transform: rotateX(0deg) rotateY(25deg) translate(20px, 0px) skew(-10deg, 0deg);
  }
}

.hexagon-2 {
  background-size: cover;
  background-position: center;
  height: 90%;
  aspect-ratio: 0.8660254038;
  -webkit-clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
          clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  transform: rotateX(0deg) rotateY(25deg) translate(60px, 0px) skew(10deg, 0deg);
  position: absolute;
  box-shadow: 15px 15px 50px inset #333;
}
@media screen and (max-width: 768px) {
  .hexagon-2 {
    height: 90%;
    transform: rotateX(0deg) rotateY(25deg) translate(20px, 0px) skew(10deg, 0deg);
  }
}

.hexagon-border-2 {
  --b: 3px; /* adjust to control the border  */
  height: 90%;
  aspect-ratio: 0.8660254038;
  -webkit-clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), calc(100% - var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), 50% calc(100% - var(--b)), calc(var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), calc(var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), 50% var(--b));
          clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), calc(100% - var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), 50% calc(100% - var(--b)), calc(var(--b) * 0.8660254038) calc(75% - var(--b) * 0.5), calc(var(--b) * 0.8660254038) calc(25% + var(--b) * 0.5), 50% var(--b));
  transform: rotateX(0deg) rotateY(25deg) translate(60px, 0px) skew(10deg, 0deg);
  background: radial-gradient(#111 61%, #fff 70%);
}
@media screen and (max-width: 768px) {
  .hexagon-border-2 {
    transform: rotateX(0deg) rotateY(25deg) translate(20px, 0px) skew(10deg, 0deg);
  }
}

.text-end {
  text-align: end;
}/*# sourceMappingURL=custom.css.map */