.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.header-card {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  max-width: 100vw;
}

.header {
  text-align: center;
  font-weight: bold;
}

.card1 {
  display: flex;
  flex-direction: column;
  background-color: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_00_Fool.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card2 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_01_Magician.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card3 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_02_High_Priestess.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card4 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_03_Empress.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card5 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_04_Emperor.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card6 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_05_Hierophant.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card7 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_06_Lovers.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card8 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_07_Chariot.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card9 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_08_Strength.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card10 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_09_Hermit.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card11 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_10_Wheel_of_Fortune.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card12 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_11_Justice.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card13 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_12_Hanged_Man.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card14 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_13_Death.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card15 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_14_Temperance.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card16 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_15_Devil.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card17 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_16_Tower.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card18 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_17_Star.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card19 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_18_Moon.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card20 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_19_Sun.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card21 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_20_Judgement.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

.card22 {
  display: flex;
  flex-direction: column;
  background: white;
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/RWS_Tarot_21_World.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0.25em 0.15em 0.2em rgba(0,0,0,0.75), -0.1em -0.1em 0.5em rgba(150,165,0,0.55);
  margin: 15px;
  padding: 1vw;
  min-height: 290px;
  max-height: 295px;
  min-width: 170px;
  max-width: 175px;
}

body {
  background-image: url('https://codecraftworks.dev/web/IaHiJ6h7ZcfvWrbPzSEd/assets/altinay-dinc-LluELtL5mK4-unsplash(1).jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 15px;
  padding: 0.5vw;
}

.description {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  color: rgba(250, 250, 250, 1);
  margin: ;
  padding: ;
}

.title {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: rgba(250, 250, 250, 1);
  margin: ;
  padding: ;
}