.age-gate {
  --form-margin: 1em;
  padding-top: 0 !important;

  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  background-image: url("/wp-content/themes/yellowstonebourbon/imgs/pics/Bottle_Dark_BG.png");
  background-image: image-set("/wp-content/themes/yellowstonebourbon/imgs/pics/Bottle_Dark_BG.avif" type("image/avif"), "/wp-content/themes/yellowstonebourbon/imgs/pics/Bottle_Dark_BG.png" type("image/png"));
  background-size: cover;
  background-position: top center;
  color: var(--color-ivory);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow: auto;

  .container-content {
    height: 100%;
    overflow: auto;
  }

  .age-gate-input {
    color: #424546;
    font-size: 1.5rem;
    font-weight: 800;
    padding: .5em;
    border: 0;
    border-radius: 5px;
    width: 5em;
    display: block;
  }
}

.age-gate h1 {
  font-size: clamp(1rem, calc(2rem + 2vw), 3rem);
}

.age-gate .logo {
  margin-top: var(--form-margin);
}
.age-gate .logo,
.age-gate .header,
.age-gate .inputs-dob {
  margin-bottom: var(--form-margin);
}

.age-gate .logo img {
  width: 100%;
  /* transition: all 1s; */
}

.age-gate .error {
  color: #c70f0f;
  font-size: 0.8em;
}

.age-gate .btn-dob {
  background-color: #d9d9d9;
  color: var(--color-brown);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-block;
}

.age-gate .inputs-dob {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  text-align: start;
}

@media (min-width: 768px) {
  .age-gate {
    --form-margin: 3em;
  }
  
  .age-gate .logo img {
    width: 400px;
  }
  .age-gate .inputs-dob {
    flex-direction: row;
  }
}