.single-juice {
  overflow: hidden;
  position: relative;
  padding-left: var(--container-space);
  padding-right: var(--container-space);
  padding-top: 3rem;
  padding-bottom: 3rem;

  .intro {
    font-family: 'Impact';
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 2rem;
    border-image: linear-gradient(to right, var(--c) 0%, var(--c-alt) 50%, var(--c) 100%) 1;
    border-style: solid;
    border-width: 5px;
    margin-bottom: 2rem;
    border-top: unset;
    border-left: unset;
    border-right: unset;
    gap: 5vw;

    .image {
      min-width: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      position: relative;

      >img {
        object-fit: contain;
        max-width: 400px;
        max-height: 400px;
        position: relative;
        z-index: 2;
      }

      &::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background-color: var(--c);
        filter: drop-shadow(-6.787px -12.245px 54.5px rgba(0, 76, 26, 0.63));
      }
    }

    .content {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;

      h1,
      h2 {
        padding: 0;
        line-height: 1;
        text-transform: uppercase;
        font-family: 'Impact', sans-serif;
      }

      h1 {
        margin: 2rem 0 1rem;
        font-size: 6rem;
        color: var(--c-alt);
      }

      h2 {
        font-size: 3rem;
        color: var(--c);
      }

      .vitamins {
        margin-top: 2rem;
        margin-bottom: 4rem;
        font-family: 'Impact', sans-serif;
        width: fit-content;
        padding: 1rem;
        gap: 1rem;
        max-width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid var(--c-alt);
        border-radius: 25px;
        background: #FFF;


        >.text {
          width: 100%;
          font-size: 2rem;
          color: var(--c);
        }

        >.list {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: nowrap;
          gap: 0.25rem;
        }

        .vitamin {
          text-transform: uppercase;
          font-size: 1.5rem;
          text-wrap: nowrap;
        }
      }
    }
  }

  .related {
    font-family: 'Impact';
    padding-top: 2rem;
    border-image: linear-gradient(to right, var(--c) 0%, var(--c-alt) 50%, var(--c) 100%) 1;
    border-style: solid;
    border-width: 5px;
    margin-top: 2rem;
    border-bottom: unset;
    border-left: unset;
    border-right: unset;
    padding-bottom: 6rem;

    >h2 {
      text-align: center;
      font-size: 4rem;
      line-height: 1.3;
      color: var(--c);
    }
  }

  @media(max-width: 1600px) {

    .related {
      >h2 {
        font-size: 3.5rem;
      }
    }
  }

  @media(max-width: 981px) {

    .intro {
      flex-direction: column;
      gap: 2.5rem;
      line-height: 1.3;

      .image {
        order: 2;
        min-width: unset;
        max-width: 400px;
        max-height: 400px;
        padding: 1rem;

        >img {
          max-width: inherit;
          max-height: inherit;
        }

        &::after {
          width: unset;
          height: 95vw;
          max-height: calc(100% - 5vw);
          aspect-ratio: 1;
        }
      }

      .content {
        align-items: center;
        text-align: center;

        h1 {
          font-size: 15vw;
        }

        h2 {
          font-size: 10vw;
        }

        .vitamins {
          justify-content: center;
          gap: .5rem;

          .text {
            font-size: 9vw;
          }

          .vitamin {
            font-size: 7vw;
          }
        }
      }
    }


    .related {
      >h2 {
        font-size: 10vw;
      }
    }
  }

  @media(max-width: 550px) {
    .related {
      margin-top: 2rem;
    }
  }
}