.cards-block
{
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  
	> *
	{
		margin: 0 clamp(1em, 5dvw, 10em);
	}
	
	.swiper
	{
		width: calc(100% - calc(clamp(1em, 5dvw, 10em) * 2));
	}
	
  .swiper-wrapper
  {
	align-items: flex-end;
	  
    div.card
    {
      position: relative;
      border-radius: 0 0 1em 1em;
      background: white;
      padding: 10em 2em 2em 2em;
      clip-path: polygon(65% 0, 100% 30%, 100% 100%, 0 100%, 0 45%);
    }

    div.card.colorway-1
    {
      h3
      {
        color: var(--splash-color-1);
      }
    }

    div.card.colorway-2
    {
      background: var(--splash-color-2);
    }

    div.card.colorway-3
    {
      h3
      {
        color: var(--splash-color-2);
      }
    }

    div.card.colorway-4
    {
      background: var(--splash-color-1);

      *
      {
        color: white;
      }
    }
  }
}

@media( width < 1200px )
{
	.cards-block
	{
		.swiper
		{
			width: calc(100% - 2em);
			
			div.card
			{
				cursor: grab;
			}
		}
	}
}