.block-articles {
  inline-size: 100%;
  background-color: $color-white;
  overflow: hidden;

  .grid-container {
    display: flex;
    flex-direction: column;
    row-gap: $spacing-xl;
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    row-gap: $spacing-xsm;
  }

  &__content {
    position: relative;
    display: flex;
    flex: 1;
    
    &-wrap {
      display: flex;
      width: fit-content;
      flex-wrap: nowrap;
    }

    &-arrows {
      position: absolute;
      display: flex;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      z-index: 3;

      &:has(.lock) {
        display: none;
      }

      .arrows-prev,
      .arrows-next {
        position: absolute;
        display: flex;
        top: 124px;
        width: 42px;
        height: 42px;
        border: 1px solid $color-black;
        border-radius: 2px;
        background-color: $color-white;
        align-self: center;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        @include btn-hover($color-accent--hover);

        @include media-down(md) {
          top: 86px;
        }

        &.disabled {
          opacity: 0.2;
        }
      }

      .arrows-prev {
        left: -21px;
        @include icon('@/Images/icons/chevron-left.svg', 16px);
      }

      .arrows-next {
        right: -21px;
        @include icon('@/Images/icons/chevron-right.svg', 16px);
      }
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: occupies(4, 0);
      padding-right: var(--gap);
      box-sizing: content-box;
      flex: 1 0 0;

      &:last-child {
        padding-right: 0;
      }

      @include media-down(md) {
        width: 320px;
      }

      &-imag {
        position: relative;
        aspect-ratio: 3 / 2;
        background-color: $color-black5;

        .cta {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        
        figure {
          aspect-ratio: 3 / 2;

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

          figcaption {
            display: none;
          }
        }
      }

      &-text {
        padding: $spacing-smd;
      }
    }
  }
}