:root {
  --brandLogoSize: clamp(155px, calc(100px + 1vw), 5000px);
  --brandLogoGap: calc(var(--brandLogoSize)/4)
}

#releaseContainer {
  display: grid;
  grid-template-columns: 1fr 4fr;
  justify-content: center;
  align-items: flex-start;
  gap: var(--brandLogoGap);
  height: fit-content;
}

#releaseContainer img {
  width: 100%;
  max-width: 50vw;
  height: auto;
}

#releaseContainer nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  grid-column: 2;
}

#streamingHeadingContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: fit-content;
}

#streamingHeadingContainer h3 {
  text-align: center;
}

#streamingLinksContainer {
  flex: 1;
  margin: var(--brandLogoGap) 0 0 0;
  padding: auto 0 auto 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--brandLogoSize) var(--brandLogoSize) var(--brandLogoSize) var(--brandLogoSize) var(--brandLogoSize);
  gap: var(--brandLogoGap);
  justify-content: space-between;
  align-items: center;
}

#streamingLinksContainer:has(li p) {
  margin: 5px 0 0 0;
  grid-template-columns: 100% !important;
  align-items: flex-start;
}

#streamingLinksContainer p {
  margin: 0;
}

#streamingLinksContainer a {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

#streamingLinksContainer a:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: 15px;
}

#bandcampLogo {
  transform: scale(1.1);
}

#iheartmediaLogo {
  transform: scale(1.0);
}

#soundcloudLogo {
  transform: scale(1.4);
}

  @media (min-width: 1920px) {
    :root {
      --brandLogoSize: clamp(155px, calc(100px + 5vw), 5000px);
    }

    #releaseContainer {
      gap: calc(var(--brandLogoGap) * 2);
    }
  }

  @media (max-width: 1300px) {
    #streamingLinksContainer {
      grid-template-columns: var(--brandLogoSize) var(--brandLogoSize) var(--brandLogoSize);
    }
    #soundcloudLogo {
      margin: calc(var(--brandLogoGap) * -1 / 1.4) 0 calc(var(--brandLogoGap) * -1 / 1.4) 0;
    }
  }

  @media (max-width: 880px) {
    #releaseContainer {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    #streamingLinksContainer {
      grid-template-columns: var(--brandLogoSize) var(--brandLogoSize);
    }
  }

  @media (max-width: 700px) {
    #releaseContainer img {
      max-width: 100%;
    }
  }

  @media (max-width: 450px) {
    #streamingHeadingContainer h3 {
      line-height: 1.5;
    }

    #streamingLinksContainer {
      grid-template-columns: var(--brandLogoSize);
      justify-content: center;
    }
  }