/* 🎶🎶🎶 GLOBAL 🎶🎶🎶 */
::selection {
  background:rgba(220, 20, 60, 0.473);
}
* {
  box-sizing:border-box;
}
body {
  margin: 0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:beige;
}
img {
  display: block;
  width:100%;
}
figure {
  margin: 0;
}
.wrapper {
  margin: auto;
  gap:10px;
}

/* 🐳🐳🐳 Button 🐳🐳🐳 */
.btn {
  text-decoration: none;
  padding:6px 16px;
  border-radius:20px;
  font-size: 18px;
}

/* 🃏🃏🃏 CARDS 🃏🃏🃏 */
.cards {
  display:flex;
  flex-direction: column;
  overflow: hidden;
  gap:15px;
}
.card {
  position: relative;
}
.card__txt {
  position: absolute;
  bottom:20px;
}
.card__txt--right {
  right: 20px;
}
.card__txt--left {
  left: 20px;
}
.card__category {
  display: flex;
  gap:5px;
}
.card--light {
  color:#fff;
}
.card--dark {
  color:#000;
}
.card--dark .btn {
  background:#000;
  color:#fff;
}
.card--dark .btn:hover {
  background:#3c3c3c;
}
.card--light .btn {
  background:#fff;
  color:#000;
}
.card--light .btn:hover {
  background:#CACACB;
}
h2 {
  margin-left: 15px;
}
h3 {
  font-size: 24px;
  margin-top: 15px;
}
.small__cards .cards {
  display: flex;
  flex-wrap:nowrap;
  flex-direction: row;
  overflow-x: scroll;
  scrollbar-color: #343434 transparent;
}
.small__cards .card {
  flex : 0 0 calc((100% - 15px) / 2);
}

@media screen and (min-width:650px) {
  .wrapper {
    width: 95%;
  }
  .cards {
    flex-wrap:wrap;
    flex-direction:row;
  }
  .card--medium {
    width: calc((100% - 30px) / 3);
  }
  h2 {
    margin-left: 0;
  }
}
@media screen and (min-width:960px) {
  .card--big {
    width: calc((100% - 15px) / 2);
  }
  .card--xxl {
    width: 100%;
  }
  .small__cards .card {
    flex : 0 0 calc((100% - 30px) / 3);
  }
}