@import "_functions";
@import "_mixins";
@import "_variables";

.block-ping-pong-section {
  .section-description {
    @include media-breakpoint-down(lg) {
      margin-bottom: 40px;
    }

    h2 {
      font-size: 48px;
      line-height: 54px;
      text-align: center;

      @include media-breakpoint-down(md) {
        font-size: 35px;
        line-height: 40px;
      }
    }

    p {
      font-size: 18px;
      text-align: center;
      line-height: 28px;
      font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
      font-weight: 400;
    }
  }

  .ping-pong-items {
    display: flex;
    flex-direction: column;
    gap: 60px;
    @include media-breakpoint-down(lg) {
      gap: 40px;
    }
  }

  .ping-pong-item {
    margin-bottom: 40px;
    border-radius: 10px;
    width: calc(100% - 72px);
    position: relative;
    min-height: 455px;
    background-color: var(--smally-ping-pong-item-background, #2F2F2F);

    @include media-breakpoint-down(lg) {
      width: 100%;
      margin-bottom: 40px;
    }

    .item-image {
      position: absolute;
      top: 40px;
      right: -72px;
      bottom: -40px;
      border-radius: 10px;

      @include media-breakpoint-down(lg) {
        position: unset;
        max-width: calc(100% - 25px);
        margin-top: -40px;
        margin-bottom: 40px;
      }

      @include media-breakpoint-down(sm) {
        min-height: 250px !important;
      }
    }

    h3 {
      font-weight: 500;
      font-size: 32px;
      line-height: 40px;
      margin-bottom: 30px;
      color: var(--smally-ping-pong-color-header, black);

      &:after {
        content: '';
        display: block;
        margin-top: 30px;
        height: 8px;
        width: 80px;
        border-radius: 10px;
        background-color: rgb(11, 169, 232);
      }

      @include media-breakpoint-down(md) {
        font-size: 35px;
        line-height: 40px;
      }
    }

    p {
      font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
      font-size: 18px;
      line-height: 28px;
      margin-bottom: 30px;
      color: var(--smally-ping-pong-color, black);


      @include media-breakpoint-down(md) {
        margin-bottom: 36px;
      }
    }

    .btn-wrapper {
      display: flex;
      gap: 20px 30px;
    }

    .item-description {
      padding: 30px;

      @include media-breakpoint-down(lg) {
        padding: 0 20px 40px;
      }
    }
  }
}
