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

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

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    margin: auto;
    text-align: center;
    row-gap: $spacing-xsm;
  }

  &__content {
    display: grid;
    row-gap: $spacing-sm;

    &-tabs {
      padding-right: calc($spacing-xs + 2px);
      max-width: var(--max-width-break);

      &-nav {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        height: fit-content;
        padding: $spacing-base;
        margin: auto;
        border: 1px solid $color-black;
        border-radius: 999px;
        justify-content: center;

        .var-color-white {
          --var-color: #{$color-black10};
        }

        .tab {
          max-width: 260px;
          flex: 1 0 auto;
          @include btn-tab;
          @include btn-hover(var(--var-color));

          &.select {
            background-color: var(--var-color);
          }

          &:last-child {
            margin: 0 !important;
          }

          @include media-down(xs) {
            max-width: 180px;
          }
        }
      }
    }

    &-panels {
      @include grid-cols(12);
      gap: 0;

      .panel {
        display: grid;
        @include col-span(10);
        @include col-start(2);

        height: 0;
        row-gap: 40px;
        overflow: hidden;
        opacity: 0;
        transition: height $transition-default, opacity $transition-default;

        &.select {
          grid-template-rows: 1fr;
          height: auto;
          opacity: 1;
        }

        @include media-down(xl) {
          @include col-span('full');
        }

        &-content {
          padding: $spacing-xxl;
          @include grid-cols(2);

          @include media-down(md) {
            padding: $spacing-lg;
          }

          &-intro {
            @include col-span(1);

            @include media-down(lg) {
              @include col-span('full');
            }
          }

          &-info {
            @include col-span(1);

            @include media-down(lg) {
              @include col-span('full');
            }
          }
          
          &.bg-color-white {
            border: 1px solid $color-black20;
          }

          &:has(> :only-child) {
            .panel-content-intro,
            .panel-content-info {
              @include col-span('full');
            }
          }
        }

        &-banner {
          display: flex;
          flex-wrap: wrap;
          padding: $spacing-sm $spacing-lg;
          justify-content: space-between;
          gap: $spacing-sm;
          @include col-span('full');

          &-links {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-xs $spacing-lg;
            align-items: center;
          }

          &.bg-color-white {
            border: 1px solid $color-black20;
          }
        }
      }
    }
  }
}