.custom-buttons-v11 {
  --gap: 32px;
  --border-radius: 20px;


  @media screen and (max-width: 1499px) {
    --gap: 3%;
  }

  @media screen and (max-width: 959px) {
    --border-radius: 10px;
  }

  .custom-buttons-v11-wrapper {
    padding-left: var(--gap);
    padding-right: var(--gap);
    box-sizing: border-box;

    .button-group {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      column-gap: 1.5vw;
      margin-bottom: 30px;

      @media screen and (max-width: 959px) {
        margin-bottom: 15px;
        column-gap: 15px;
      }

      @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
      }

      .button-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: box-shadow var(--transition-time, .25s) linear;
        margin-top: 10px;
        margin-bottom: 10px;

        @media screen and (max-width: 1200px) {
          border-radius: 10px;
        }

        &:has(a) {
          box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.25);
        }

        &:has(a:hover) {
          box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.3);
        }

        .button-image:has(img[src]:not([src=""])) {
          display: block;
          aspect-ratio: 7/5;
        }

        .button-image {
          a {
            display: block;
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }

      &:not(:has(> div:nth-child(5))) {
        column-gap: 3vw;
      }

      @media screen and (max-width: 1499px) {
        &:has(> div:nth-child(7)) {
          column-gap: 15px;

          .button-item {
            border-radius: 5px;

            &:has(a) {
              box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }

      @media screen and (max-width: 1250px) {
        &:has(> div:nth-child(7)) {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      @media screen and (max-width: 959px) {
        &:has(> div:nth-child(5)) {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media screen and (max-width: 599px) {
        &:has(> div:nth-child(2)) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }
}


#app:has(#g2) {
  .custom-buttons-v11 {
    margin-top: -70px;

    @media screen and (max-width: 1200px) {
      margin-top: 30px;
    }

    @media screen and (max-width: 959px) {
      margin-top: 15px;
    }
  }

  #cms-gallery {
    .text {
      bottom: 160px;
    }

    @media screen and (min-width: 1200px) {
      .position {
        left: unset;
        right: 215px;
        bottom: 100px;
      }

      .play.button-action,
      .pause.button-action {
        left: unset;
        right: 169px;
        bottom: 92px;
      }
    }
  }
}