body {
    background: rgb(50, 126, 224);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.content-wrapper {
    width: 100%;
    max-width: 1200px;
}
.card {
    cursor: pointer;
    width: 100%;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 255, .2);
    transition: all .2s;
    box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}

.card:hover {
    box-shadow: -12px 12px 2px -1px rgba(0, 0, 255, .2);
}
a {
    text-decoration: none;
    color: inherit;
}

  #recordIframe {
    height: 240px;
}

@media (max-width: 375px) {
  #recordIframe {
    height: 230px;
}
  #xtopframe {
    height: 80px;
  }
 #linkframe{
    height: 430px;
}


}

@media (max-width: 480px) {
  #recordIframe {
    height: 230px;
}
  #xtopframe {
    height: 82px;
  }
 #linkframe{
    height: 430px;
}


}


@media (min-width: 481px) and (max-width: 768px) {
  #recordIframe {
    height: 230px;
  }
  #xtopframe {
    height: 89px;
  }
 #linkframe{
    height: 650px;
}

}


@media (min-width: 769px) {
  #recordIframe {
    height: 450px;
  }
  #xtopframe {
    height: 107px;
  }
 #linkframe{
    height: 650px;
}

}