.cards__container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 100%;
  gap: var(--base-padding);
  margin-top: var(--base-padding);
}

.cards__container .cards__parallax {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
 /* background-attachment: fixed;*/
  background-position: center top;
  background-repeat: no-repeat;
  /*background-size: auto 115%;*/
  background-size: 100% auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /*transition: all 0.01s linear;*/
  transition: transform 0.2s ease-in-out;
}

.cards__container .cards__parallax:hover {
  transform: scale(1.01);
}

.cards__container .cards__parallax a {
  width: 100%;
  height:  100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.cards__container .cards__parallax img,
.cards__container .cards__parallax svg:last-child {
  width: 20.5rem;
  height: 4.3rem;
  flex-shrink: 0;
  max-width: 66%;
}

.cards__parallax--comvation {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    url('../images/comvation_background.jpg');
}
.cards__parallax--cleverclip {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    url('../images/cleverclip_background.jpg');
}
.cards__parallax--cubetech {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    url('../images/cubetech_background.jpg');
}
.cards__parallax--unfold {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    url('../images/unfold_background.jpg');
}

@media (min-width: 576px) {
  .cards__container {
    gap: var(--small-padding);
    margin-top: var(--small-padding);
  }
}

@media (min-width: 768px) {
  .cards__container {
    gap: var(--medium-padding);
    margin-top: var(--medium-padding);
  }
}

@media (min-width: 992px) {
  .cards__container {
    grid-template-columns: calc(50% - (var(--large-padding) / 2)) calc(50% - (var(--large-padding) / 2));
    gap: var(--large-padding);
    margin-top: var(--large-padding);
  }

  .cards__container .cards__parallax:first-child {
    margin-top: calc(var(--large-padding) * 2);
  }

  .cards__container .cards__parallax:nth-child(4) {
    margin-top: calc(var(--large-padding) * -2);
  }

  .cards__container .cards__parallax {
    aspect-ratio: 9/16;

   background-size: auto 120%;
  }
}

@media (min-width: 1200px) {
  .cards__container {
    grid-template-columns: calc(50% - (var(--xlarge-padding) / 2)) calc(50% - (var(--xlarge-padding) / 2));
    gap: var(--xlarge-padding);
    margin-top: var(--xlarge-padding);
  }

  .cards__container .cards__parallax:first-child {
    margin-top: calc(var(--xlarge-padding) * 2);
  }

  .cards__container .cards__parallax:nth-child(4) {
    margin-top: calc(var(--xlarge-padding) * -2);
  }
}

@media (min-width: 1400px) {
  .cards__container {
    grid-template-columns: calc(50% - (var(--xxlarge-padding) / 2)) calc(50% - (var(--xxlarge-padding) / 2));
    gap: var(--xxlarge-padding);
    margin-top: var(--xxlarge-padding);
  }

  .cards__container .cards__parallax:first-child {
    margin-top: calc(var(--xxlarge-padding) * 2);
  }

  .cards__container .cards__parallax:nth-child(4) {
    margin-top: calc(var(--xxlarge-padding) * -2);
  }
}