:root {
  --header-height: 82px;
  --branding-bg-color: #F9FBFD;
}

body {
  background: var(--branding-bg-color);
}

.site-main,
.home .site-main {
  margin-top: calc(250px + var(--header-height));
  box-shadow:  0px -10px 10px -10px #4f4f4f;
}

.pinup {
  position: relative;
  display: flex;
  justify-content: center;
}

.pinup-link {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  height: 900px;
  width: 100%;
  min-height: 100vh;
  background: url('./img/pattern.avif') repeat center / auto, var(--branding-bg-color);
}

.pinup-top {
  position: absolute;
  top: var(--header-height);
  padding-inline: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 250px;
  z-index: 1;
}

.pinup-side {
  position: absolute;
  width: 100%;
  max-width: 1920px;
}

.pinup-side__left {
  position: absolute;
  top: 49px;
  left: -394px;
}

.pinup-side__right {
  position: absolute;
  top: 63px;
  right: -394px;
}

.pinup-side__all {
  display: none;
}

.pinup-side__left.blur {
  display: none;
}

.pinup-top__text {
  width: 76.56vw;
  max-width: 1470px;
}

.pinup-top__text.tablet {
  display: none;
}

@media (max-width: 1600px) {
  .pinup-top__text {
    width: 67vw;
  }
}

@media (max-width: 1280px) {
  .pinup-side__all {
    display: block;
    position: absolute;
    top: -506px;
    right: -308px;
  }

  .pinup-top {
    left: 90px;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 525px;
    column-gap: 36px;
  }

  .pinup-top__divider {
    width: 2px;
    height: 46px;
    background: #0C0F18;
  }

  .pinup-top__text {
    display: none;
  }

  .pinup-top__text.tablet {
    display: block;
  }

  .pinup-side__left,
  .pinup-side__right {
    display: none;
  }

  .pinup-side__left.blur {
    display: block;
    position: absolute;
    left: -245px;
    bottom: -278px;
  }

  .pinup-link::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 100%;
    right: 0;
    top: 0;
    background: #0C0F18;
    z-index: -1;
  }
}

@media (max-width: 1170px) {
  .pinup-top {
    left: 0;
  }

  .pinup-top__text.tablet {
    width: 360px;
  }

  .pinup-side__left.blur {
    display: none;
  }

  .pinup-link::after {
    display: none;
  }
}

@media (max-width: 991px) {
  :root {
    --header-height: 65px;
  }

  .pinup-side__all {
    top: -394px;
    right: -308px;
    width: 1000px;
  }
}

@media (max-width: 767px) {
  .pinup-side__all {
    top: -51.84vw;
    right: -40.52vw;
    width: 120vw;
  }
}

@media (max-width: 480px) {
  .site-main,
  .home .site-main {
    margin-top: var(--header-height);
  }

  .pinup-top > * {
    display: none !important;
  }

  .pinup-side__all {
    display: none;
  }

  .pinup-top {
    position: relative;
    padding: 0;
    width: 100%;
    height: 255px;
    background: url('img/bg-mobile.avif') no-repeat center / cover;
    z-index: 1;
  }

  .pinup-link {
    background: none;
  }
}