.recent-news-block {
  .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 50px;
    h2 {
      margin-bottom: 0;
      flex-basis: calc(60% - 30px);
    }
    .button-wrapper {
      text-align: right;
      flex-basis: calc(40%);
    }
  }
  .rn-wrapper {
    display: flex;
    gap: 30px 20px;
    flex-wrap: wrap;
  }
}


.button-wrapper {
  a.siteCTA {
    padding: 15px 25px;
    border: 4px solid #000;
    text-transform: uppercase;
    position: relative;
    transition: all 333ms ease;
    text-decoration: none;
    &:before {
      content: '';
      background: white;
      width: 4px;
      height: 6px;
      position: absolute;
      top: -5px;
      right: 20px;
      z-index: 5;
    }
    &:after {
      content: '';
      background: white;
      width: 6px;
      height: 4px;
      position: absolute;
      top: 20px;
      right: -4px;
      z-index: 5;
    }
    &.white {
      border-color: #fff;
      color: #fff;
    }
    &.b_bg {
      &:before, &:after {
        background: #000;
      }
    }
    &.ob_bg {
      &:before, &:after {
        background: #0A1115;
      }
    }
    &:hover {
      border-color: #372DF9;
      color: #372DF9;
    }
  }
}

@media (max-width: 993px) {
  .recent-news-block {
    .top {
      flex-wrap: wrap;
      h2, .button-wrapper {
        flex-basis: 100%;
        text-align: left;
      }
    }
  }
  .recent-news-block .rn-wrapper {
    .single-post {
      flex-basis: calc( 50% - 12px);
    }
  }
}
@media (max-width: 768px) {
  .recent-news-block .rn-wrapper {
    .single-post {
      flex-basis: 100%;
    }
  }
}

.rn-slider-outer {
  position: relative;
  overflow: hidden;

  &.has-slider {
    .rn-wrapper {
      flex-wrap: nowrap;
    }
    .single-post {
      flex: 0 0 calc(33.333% - 14px); // 3 per view, adjust gap math as needed
    }
  }
}

.rn-slider-track {
  transition: transform 400ms ease;
  will-change: transform;
}

.rn-slider-arrows {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;

  .rn-arrow {
    width: auto;
    height: auto;
    border: 0px solid #000;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 250ms ease;
    padding: 0;

    &:hover {
      border-color: #372DF9;
      color: #372DF9;
    }

    &.is-disabled {
      opacity: 0.3;
      pointer-events: none;
    }
  }
}
.rn-slider-arrows .rn-arrow {
  &.is-disabled,
  &:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
}

@media (max-width: 993px) {
  .rn-slider-outer.has-slider .single-post {
    flex-basis: calc(50% - 10px); // 2 per view
  }
}

@media (max-width: 768px) {
  .rn-slider-outer.has-slider .single-post {
    flex-basis: 100%; // 1 per view
  }
}