.frame {
  position: relative;
  width: 100%;
  height: 405px;
  max-width: 514px;
  max-height: 600px;
  z-index: 1;
}
.card{
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #f1f1f1;
  border-radius: 10px;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  touch-action: none;
  transition: 0.2s ease-in-out;
}
.card:nth-child(2) {
  transform: rotate(5deg);
}
.card:nth-child(3) {
  transform: rotate(8deg);
}
.card:nth-child(1) {
  transform: rotate(11deg);
}
.card .bottom {
  width: 100%;
  height: 25%;
  background: linear-gradient(to top, #00000080, #00000000);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 7%;
  font-weight: 400;
}
.card .bottom .title > span:nth-child(1) {
  font-size: 2em;
  font-weight: 700;
  margin-right: 0.2em;
}
.card .bottom .title > span:nth-child(2) {
  font-size: clamp(13px, 1.5em, 25px);
}
.card .bottom .title > span:nth-child(2) > b {
  font-size: 0.6em;
  margin-right: 0.2em;
}
.card .bottom .info {
  margin: 3% 0 0 2%;
  font-size: clamp(10px, 1.1em, 20px);
}

ul.dots{
  margin: 20px auto;
}
ul.dots li {
  height: 10px;
  width: 10px;
  background: #ccc;
  border-radius: 50%;
  margin-left: 3px;
  margin-right: 3px;
  cursor: pointer;
  display: inline-block;
}
ul.dots li:hover {
  background: #bbb;
}
ul.dots li.active {
  background: #066CB6;
}

@media screen and (max-height: 1200px) {
  .frame {
    /* width: 37vh; */
    width: 39vh;
    /* height: 40vh; */
    height: 39vh;
    font-size: 13px;
    margin-top: -12px;
    margin-bottom: 35px;
  }
}

@media screen and (max-height: 540px) {
  .frame {
    width: 37vh;
    height: 40vh;
    font-size: 13px;
  }
}
@media screen and (max-height: 440px) {
  .frame {
    font-size: 8px;
  }
}