.cards-container {
	display: flex;
  flex-wrap: wrap;
 
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	align-items: center;
	overflow: hidden;
	padding: 0em 0 2em 0;
	margin-bottom: 0;
	
  @media (max-width: calc(370px *3)) {
 
    flex-direction: column !important; /* prvky pod sebe */
   row-gap: 2em;
    .card-animation{
      width: 8rem;
      height: 18rem;
    }

  
}

}


.cards article,
.cards-container .card,
.cards-wrapper .card-animation {
  border-radius: 0.5em;
  overflow: hidden;
  max-width: 20em;
  height: 480px;
  transition: transform 0.3s ease;
}

.cards article:hover,
.cards-container .card:hover,
.cards-wrapper .card-animation:hover {
  transform: scale(1.03);
}


.card-content {
  padding: 1em;
}

.card-content h3 {
  margin-bottom: 0.5em;
  color: var(--headings-color);
}

.container-title {
  text-align: center;
  padding: 0 !important;
  margin-bottom: 40px;
  font-size: 40px;
  color: #fff;
  font-weight: 600;
  line-height: 60px;
}



.card {
  max-width: 450px;
  border: 0;
  width: 100%;
  margin-inline: auto;

}


.card-image img{
  
display: block;
  width: 100%;
  height: 70%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s;

}






.container-card {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(71deg, #080509, #1a171c, #080509);
  background-clip: padding-box;
  border-radius: 45px;
  height: 450px;
  padding: 40px;
  img {
    margin-bottom: 32px;
  }
}

.bg-green-box,
.bg-white-box,
.bg-yellow-box,
.bg-blue-box {
  position: relative;
}

.bg-green-box::after,
.bg-white-box::after,
.bg-yellow-box::after,
.bg-blue-box::after {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  content: "";
  z-index: -1;
  border-radius: 45px;
}

.bg-green-box::after {
  background: linear-gradient(71deg, #0d1212, #3da077, #0d1212);
}

.bg-white-box::after {
  background: linear-gradient(71deg, #121013, #b0afb0, #121013);
}

.bg-yellow-box::after {
  background: linear-gradient(71deg, #110e0e, #afa220, #110e0e);
}

.bg-blue-box::after {
  background: linear-gradient(71deg, #0c0a0e, #5f6fad, #0c0a0e);
}

.card-title {
  font-weight: 600;
  color: white;
  letter-spacing: -0.02em;
  line-height: 40px;
  font-style: normal;
  font-size: 28px;
  padding-bottom: 8px;
}

.card-description {
  font-weight: 600;
  line-height: 32px;
  color: hsla(0, 0%, 100%, 0.5);
  font-size: 16px;
  max-width: 470px;
}