.xmas-categories {
   margin: 0 auto;
   max-width: 1081px;
   padding: 10px 0 15px;
   text-align: center;

   a {
      @include underline-never;

      color: $black;
      display: block;
      margin: 15px auto;
      max-width: 341px;
      position: relative;
      text-transform: uppercase;
   }

   span {
      display: inline-block;
      letter-spacing: .12em;
      position: relative;
      text-align: center;
      width: 184px;

      &::after,
      &::before {
         content: "";
         border-top: 1px solid $black;
         display: block;
         position: absolute;
         top: 25px;
         width: calc(50% - 48px);
      }

      &::after {
         right: 0;
      }

      &::before {
         left: 0;
      }
   }

   p {
      font-family: $font-bernino;
      font-size: 32px;
      margin: 0 auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 184px;
      z-index: 2;
   }

   .simple {
      width: auto;
   }

   .short span {
      &::after,
      &::before {
         width: calc(50% - 88px);
      }
   }

   strong {
      display: block;
      font-size: 40px;
   }

   @media screen and (min-width: 768px) {
      .line::after {
         border: 1px solid $black;
         border-top: 0;
         border-bottom-color: transparent;
         content: '';
         display: block;
         height: 103px;
         margin: auto;
         max-height: 0;
         overflow: hidden;
         position: absolute;
         top: 25px;
         left: 0;
         right: 0;
         transition: all .3s;
      }

      a:hover .line::after {
         border-bottom-color: $black;
         max-height: 103px;
      }

      .simple::after {
         border-bottom: 1px solid $black;
         content: '';
         display: block;
         margin: auto;
         overflow: hidden;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         transition: all .3s;
         width: 0;
      }

      a:hover .simple::after {
         width: 80px;
      }
   }
}

.xmas-btns {
   margin: 0 auto;
   max-width: 1080px;
   overflow: auto;
   padding: 5px 0 35px;

   .btn {
      @include underline-never;

      display: block;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
   }
}

.xmas-subsections.subsections {
   padding: 15px 0 35px;
   text-align: center;

   .subsection-wrapper {
      background: url("/static/images/xmas/christmas_subsection.png") no-repeat center;
      background-size: cover;
      border: 0;
      padding: 2px;

      a {
         color: $white;
      }

      &:hover {
         outline: 2px solid rgba(255, 255, 255, .3);
         outline-offset: -2px;
      }
   }

   > div {
      display: inline-block;
      float: none;
   }

   @media screen and (max-width: 767px) {
      display: flex;

      .subsection > div:first-child {
         display: table-cell;
      }
   }
}

