.nalox-how-to {
  padding-bottom: 2rem;
}
.nalox-opener {
  color: white;
}

.nalox-opener p,
.nalox-howTo p {
  margin-bottom: 1rem;
}
.nalox-opener p {
  padding-right: 1.7rem;
}

.nalox-opener .wrapper {
  padding: 3rem 1.22rem;
  padding: 3rem var(--border-margin);
  display: grid;
  grid-template-columns: 100%;
  grid-row-gap: 2.5rem;
  row-gap: 2.5rem;
}

.nalox-opener .nalox-title {
  align-self: center;
  justify-self: center;
}

.nalox-opener .nalox-title h2 {
  font-size: clamp(2.9rem, 15vw, 5rem);
  line-height: 0.9;
  color: white;
  font-weight: 800;
  text-transform: uppercase;
}

.nalox-opener .nalox-title h2 > .outline {
  -webkit-text-fill-color: #653780;
  -webkit-text-fill-color: var(--purple-base);
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white;
}

.nalox-opener .nalox-graphic {
  justify-self: center;
  width: 100%;
}

.nalox-opener .nalox-graphic img {
  width: 100%;
}

.nalox-howTo .wrapper {
  padding: 1.22rem;
  padding: var(--border-margin);
}

.nalox-howTo header {
  margin-bottom: 3rem;
}

.nalox-step .step-title {
  display: flex;
  align-items: center;
  color: #e53f71;
  color: var(--red-base);
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: bold;
  gap: 1.7rem;
}

.nalox-step .step-title p {
  margin-bottom: 0;
}

.nalox-step .step-title .step-number {
  font-size: 4rem;
  font-weight: 700;
  display: inline-block;
  line-height: 0;
}
.nalox-howTo {
  font-size: var(--ts-large-body);
}
.nalox-howTo strong {
  color: #3f1651;
  color: var(--purple-dark);
}

.nalox-howTo ul {
  margin-left: 1.1rem;
  margin-bottom: 1rem;
}
.nalox-howTo ul li {
  list-style: disc;
}
.nalox-howTo .step-graphic {
  margin-top: 3rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.nalox-howTo .nalox-step {
  margin-bottom: 4rem;
}

.nalox-opener .nalox-graphic {
  grid-row: 3;
}

@media only screen and (min-width: 768px) {
  .nalox-opener .nalox-title h2 {
    font-size: clamp(2.8rem, 6vw, 4rem);
  }

  .nalox-opener .nalox-graphic {
    grid-row: inherit;
    width: 80%;
  }

  .nalox-opener .wrapper {
    padding: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    gap: 2.5rem;
    grid-column-gap: 2vw;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .nalox-opener .nalox-title {
    align-self: start;
    justify-self: left;
    margin-top: 0.6rem;
  }

  .nalox-opener .nalox-intro {
    grid-column: span 2;
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 7vw;
    column-gap: 7vw;
  }

  .nalox-howTo .wrapper {
    padding: 2.5rem;
  }

  .nalox-howTo .step-graphic {
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: block;
    justify-self: center;
  }

  .nalox-howTo .nalox-step {
    display: grid;
    grid-template-columns: 40% 50%;
    align-items: start;
    grid-column-gap: clamp(3rem, 9vw, 6rem);
    -moz-column-gap: clamp(3rem, 9vw, 6rem);
    column-gap: clamp(3rem, 9vw, 6rem);
    margin-bottom: 2.5rem;
  }

  .nalox-step .el--2 {
    grid-column: 1;
  }
  .nalox-step .el--3 {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .nalox-howTo .step-two .step-graphic.el--4 {
    margin-top: 0;
  }
}