.splash-header {
  position: relative;
  padding-top: var(--sp4);
  margin-bottom: var(--sp4);
  min-height: 30rem;

  .background {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
  }

  .formerly-tag {
    position: absolute;
    top: var(--sp2);
    right: var(--sp2);
    width: 7.5rem;
  }

  .splash-info {
    background-color: var(--sable);
    max-width: 24rem;
    padding: var(--sp2);
    margin-top: var(--sp4);
    transform: rotate(-1.5deg) translateY(var(--sp2));
    z-index: 4;
    position: relative;

    hr {
      border: none;
      border-top: 0.05rem solid var(--sable-fonce);
      margin: var(--sp1) 0;
    }

    .apple-vignettes {
      margin-top: var(--sp1);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--sp1);

      .apple-vignette {
        max-width: 9rem;
      }
    }

    h2.tagline {
      font-family: "UglyDave", sans-serif;
      width: 17rem;
      margin: 0 auto;
      font-size: var(--size-ugly-bigger);

      display: flex;
      flex-direction: column;
      align-items: center;

      @media (max-width: 500px) {
        font-size: var(--size-ugly-big);
        width: 12rem;
      }

      span {
        line-height: 0.8;

        &.verger {
          align-self: flex-start;
          transform: rotate(-4deg);
          margin-bottom: -0.75rem;
        }

        &.cidrerie {
          align-self: flex-end;
          transform: rotate(-2deg);
        }
      }
    }

    h3 {
      color: var(--rouge-fonce);
    }

    ul.informations {
      display: flex;
      flex-direction: column;
      gap: var(--sp05);

      li {
        min-height: 1.25rem;
        padding-left: var(--sp2);
        background-position: top left;
        background-repeat: no-repeat;

        &.opening {
          background-image: url("/assets/img/icn-pomme.svg");
        }

        &.location {
          background-image: url("/assets/img/icn-pin.svg");
        }

        &.cost {
          background-image: url("/assets/img/icn-cash.svg");
        }

        &.dogs {
          background-image: url("/assets/img/icn-os.svg");
        }
      }

      em {
        font-style: normal;
        color: var(--rouge-fonce);
      }
    }
  }

  @media (max-width: 650px) {
    /* height: auto; */
    padding-top: 0;

    .background {
      position: relative;
      margin: 0;
      margin-bottom: calc(0 - var(--sp4));
      max-height: 70vh;
      min-height: 20rem;
    }

    .content-margins {
      position: relative;

      .splash-info {
        margin: 0;
        padding: var(--sp1);
        max-width: none;
        transform: rotate(-1.5deg) translateY(calc(var(--sp1) * -1));
      }
    }
  }
}