.cards .section__top {
  margin-bottom: 4.3125rem;
}
.cards .section__top .body--2{
  max-width: 50rem;
}
.cards .card {
  flex: 0 0 24.8125rem;

  display: flex;
  flex-direction: column;
	
  text-decoration: none;
}

.cards .card .card__image {
  position: relative;
  display: block;
  width: 100%;
  height: 12.1875rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  overflow: hidden;
}

.cards .card .card__image img {
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.3s linear;
}

.cards .card .card__image::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: linear-gradient(
    0deg,
    rgba(109, 65, 177, 0.2) 0%,
    rgba(109, 65, 177, 0.2) 100%
  );
  opacity: 0;
  z-index: 1;

  transition: all 0.3s linear;
}

.cards .card .card__image::after {
  position: absolute;
  display: block;
  content: "";
  top: -5rem;
  left: 13rem;

  width: 38.8125rem;
  height: 17.375rem;

  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="621" height="278" viewBox="0 0 621 278" fill="none"%3E%3Cpath d="M621 278L256.021 263.789L313.807 139L1.77622e-05 28.0551V9.0003e-06H621V278Z" fill="%23210055" fill-opacity="0.24"/%3E%3C/svg%3E');
  background-size: cover;
  background-repeat: no-repeat;

  filter: blur(58.822425842285156px);

  opacity: 0;
  z-index: 2;

  transition: all 0.3s linear;
}

.cards .card:hover .card__image::before,
.cards .card:focus .card__image::before,
.cards .card:hover .card__image::after,
.cards .card:focus .card__image::after {
  opacity: 1;
}

.cards:has(.card:hover) .card .card__image img,
.cards:has(.card:focus) .card .card__image img {
  filter: saturate(0);
}

.cards .card .card__content {
  padding: 1.6875rem 1.3125rem 1.75rem 1.5rem;
  background-color: var(--purple-300);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  flex: 1 1 auto;
}

.cards .cards__list .card--last::before,
.cards .cards__list .card--last::after {
  content: "";
  position: absolute;
  display: block;
  background-color: var(--purple-700);
  z-index: 0;
}

.cards .card .card__text{
  color: var(--black-900);
}

.cards .cards__list .card--last::before {
  top: -0.3125rem;
  left: -10.9375rem;
  width: 38.3125rem;
  height: 14.125rem;
  filter: blur(12.5rem);
}

.cards .cards__list .card--last::after {
  bottom: -8.25rem;
  right: -26.1875rem;
  width: 54.875rem;
  height: 19.625rem;
  filter: blur(15rem);
}

.cards .cards__list {
  width: 100%;
  gap: 1.5rem 0px;
}

.cards .cards__list .card--last {
  position: relative;
  flex: 0 0 51.125rem;
  border-radius: 0.5rem;
  background-position: right 0px bottom 58%;
  background-repeat: no-repeat;
  background-size: 148.8125rem 94.9375rem;
  overflow: hidden;
}

.cards .cards__list .card--last .card__content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  background-color: rgba(50, 24, 92, 0.6);
  z-index: 1;
}

.cards .cards__list .card--last .card__title {
  color: var(--white-1000);
  margin-bottom: 2rem;
}

@media screen and (max-width: 1023px) {
  .cards .section__top .heading {
    text-align: center;
  }
  
  .cards .section__top .body--2{
      max-width: 100%;
   }

  .cards .cards__list {
    gap: 1.5rem;
  }

  .cards .card {
    flex: 1 0 calc(50% - 0.75rem);
  }

  .cards .cards__list .card--last {
    flex: 1 1 auto;
    background-position: left top;
  }

  .cards .cards__list .card--last .card__content {
    padding: 2.625rem 1.5rem;
  }

  .cards .cards__list .card--last .card__title {
    text-align: center;
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .cards .card {
    flex: 1 1 auto;
  }

  .cards .card .card__content {
    padding: 1.5rem;
  }

  .cards .cards__list {
    gap: 1rem 0px;
  }
}