.rbsv4-detail-cards {
  position: relative;
  width: min(100vw, 1920px);
  margin: 8rem auto;
  background: #e6eaee;

  .rbsv4-detail-cards__content {
    padding: 80px 64px;
    height: 100%;

    .rbsv4-detail-cards__top-content {
      display: flex;
      justify-content: space-between;
      gap: clamp(0px, 5vw, 10rem);
      margin-bottom: 4rem;

      .rbsv4-detail-cards__header-container {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .rbsv4-detail-cards__title {
          color: #031424;
          font-family: Poppins;
          font-size: 48px;
          font-style: normal;
          font-weight: 600;
          line-height: 56px;
        }

        .rbsv4-detail-cards__subtitle {
          color: #4f5250;
          font-family: Lato;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 28px;
        }
      }

      .rbsv4-detail-cards__link-container {
        display: flex;
        justify-content: center;
        white-space: nowrap;

        .rbsv4-detail-cards__link span {
          text-decoration: underline;
          color: #031424;
          font-family: Poppins;
          font-size: 18px;
          font-style: normal;
          font-weight: 600;
          line-height: 18px;
          letter-spacing: 0.36px;
          text-transform: capitalize;
        }
      }
    }

    .rbsv4-detail-cards__bottom-content {
      display: flex;
      justify-content: space-between;
      gap: 2rem;

      .rbsv4-detail-cards__card {
        position: relative;
        width: 328px;
        height: 457px;
        z-index: 1;

        .rbsv4-detail-cards__card-content-container {
          display: flex;
          justify-content: start;
          align-items: end;
          height: 100%;
          padding: 24px 16px;

          &.active {
            border-radius: 16px;
            background: rgba(3, 26, 47, 0.7);
            backdrop-filter: blur(8px);

            .rbsv4-detail-cards__card-content {
              display: none;
            }

            .rbsv4-detail-cards__card-active-content {
              display: flex;
              height: 100%;
              flex-direction: column;

              .rbsv4-detail-cards__card-active-content-description {
                color: #fff;
                font-family: Lato;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                margin-bottom: 2rem;
              }

              .rbsv4-detail-cards__card-active-content-link {
                display: flex;
                align-items: center;
                color: #fff;
                text-align: right;
                font-family: Poppins;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 18px;
                letter-spacing: 0.36px;
                text-transform: capitalize;
                text-decoration: underline;
                text-underline-offset: 4px;
              }
            }
          }

          .rbsv4-detail-cards__card-content {
            display: flex;

            .rbsv4-detail-cards__card-content-left {
              display: flex;
              align-items: center;
              gap: 0.8rem;

              .rbsv4-detail-cards__card-title {
                color: #fff;
                font-family: Poppins;
                font-size: 24px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.48px;
                text-transform: uppercase;
              }
            }

            .rbsv4-detail-cards__card-content-right {
              display: none;
            }
          }

          .rbsv4-detail-cards__card-active-content {
            display: none;
          }
        }

        .rbsv4-detail-cards__card-background {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          z-index: -1;

          img {
            object-fit: cover;
            border-radius: 16px;
          }
        }
      }
    }
  }
}

@media (max-width: 991px) {
  .rbsv4-detail-cards {
    margin: 6rem auto;

    .rbsv4-detail-cards__content {
      padding: 4.8rem 1.6rem;

      .rbsv4-detail-cards__top-content {
        flex-direction: column;
        gap: unset;

        .rbsv4-detail-cards__header-container {
          display: flex;
          flex-direction: column;
          gap: 0.8rem;
          margin-bottom: 0.8rem;

          .rbsv4-detail-cards__title {
            font-size: 32px;
            line-height: 42px;
            max-width: 385px;
          }

          .rbsv4-detail-cards__subtitle {
            font-size: 14px;
            line-height: 20px;
          }
        }

        .rbsv4-detail-cards__link-container {
          justify-content: start;

          .rbsv4-detail-cards__link span {
            font-size: 14px;
            line-height: 14px;
            letter-spacing: 0.28px;
          }
        }
      }

      .rbsv4-detail-cards__bottom-content {
        flex-direction: column;
        gap: 2.4rem;

        .rbsv4-detail-cards__card {
          width: 100%;
          height: auto;
          aspect-ratio: 1 / 1;

          .rbsv4-detail-cards__card-content-container {

            &.active {
              border-radius: 8px;
            }

            .rbsv4-detail-cards__card-content {
              width: 100%;
              justify-content: space-between;

              .rbsv4-detail-cards__card-content-right {
                display: flex;
                width: 40px;
                height: 40px;
                padding: 8px;
                justify-content: center;
                align-items: center;
                border-radius: 8px;
                border: 2px solid #fff;
              }
            }
          }

          .rbsv4-detail-cards__card-background {
            width: 100%;

            img {
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}