/* Caraque is the SnoCone brand face. Archivo Black and DM Sans keep the layout
   dependable until a licensed Caraque webfont file is added to the project. */
body {
  font-family: 'Caraque', 'DM Sans', sans-serif;
}

.hero h1,
.section-intro h2,
.product-heading h2,
.story h2,
.find h2,
.stamp span,
.ticker div,
.flavor-stage::before,
.flavor-copy h3,
.card-copy h3,
.story-badges strong,
.age-card h2 {
  font-family: 'Caraque', 'Archivo Black', sans-serif;
}

.instagram-cta {
  gap: 14px;
  margin-top: 32px;
}

.instagram-cta svg,
.instagram-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.instagram-cta .ig-dot,
.instagram-link .ig-dot {
  fill: currentColor;
  stroke: none;
}

.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.instagram-link svg {
  width: 18px;
  height: 18px;
}

.vape-options {
  left: 24px;
  right: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero-vape {
  transform: rotate(-7deg) scale(.92) !important;
}

.vape-lineup {
  position: absolute;
  inset: 58px 20px 185px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0;
}

.vape-lineup img {
  width: 145%;
  height: 100%;
  margin-left: -22%;
  object-fit: contain;
  filter: drop-shadow(8px 14px 9px rgba(17,27,56,.18));
  transition: transform .35s var(--ease);
}

.vape-lineup img:nth-child(odd) { transform: translateY(-8px) rotate(-2deg); }
.vape-lineup img:nth-child(even) { transform: translateY(9px) rotate(2deg); }
.vape-card:hover .vape-lineup img { transform: translateY(-5px) scale(1.035); }
.round-arrow { display: grid; place-items: center; }

@media (min-width: 561px) and (max-width: 900px) {
  .hero h1 { font-size: 13.5vw; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 14.5vw; }
  .vape-lineup { inset: 52px 8px 175px; }
  .vape-lineup img { width: 155%; margin-left: -27%; }
}