@media screen and (max-width: 600px) {
  :root {
    --introduction-font-size: 36pt;
    --title-font-size: 26pt;
    --card-width: 100%;
  }
  .holder {
    flex-direction: column-reverse;
    justify-content: center;
    width: 90vw
  }
  .cards-holder {
    display: flex;
    max-width: none;
    flex-direction: column;
    gap: 25px
  }
  .right-side {
    width: 90vw
  }
  .introduction {
    text-align: center;
  }
  .buttons-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
  }
  .explore {
    max-width: none
  }
  .card-text > p {
    margin: 15px;
  }
  .image-background {
    width: 150px;
  }
  .image {
    width: 102px
  }
  .card {
    padding-bottom: 2vh;
  }
}