.ticket-frame {
  position: relative;
  width: 100%;
  margin: 0 0 3rem;
  padding: .5rem;
  border: #101e82 4px solid;
  background-image:
    url(../img/ticket/frame-corner.png),
    url(../img/ticket/frame-corner.png),
    url(../img/ticket/frame-corner.png),
    url(../img/ticket/frame-corner.png);
  background-repeat: no-repeat;
  background-position: top 8px left 12px, top 8px right 12px, bottom 8px left 12px, bottom 8px right 12px;
  background-size: 3% auto, 3% auto, 3% auto, 3% auto;
}

.ticket-frame:last-child {
  margin: 0;
}

.ticket-frame-inner {
  padding: 2rem 3rem;
  border: #101e82 2px solid;
}

.outer {
  width: 100%;
  margin: 0 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: first baseline;
  flex-wrap: wrap;
}

.ticket-name {
  width: 100%;
  margin: 0 0 1rem;
  font-size: 20px;
  font-weight: 600;
}

.btn-box {
  width: 100%;
  margin: 2rem 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ticket-off {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(7, 21, 77, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ticket-off p {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .ticket-frame {
    margin: 0 0 2rem;
    padding: .3rem;
    border: #101e82 3px solid;
    background-size: 6% auto, 6% auto, 6% auto, 6% auto;
  }
  
  .ticket-frame-inner {
    padding: 2rem 2rem;
    border: #101e82 1px solid;
  }
  
  .outer {
    margin: 0 0 1rem;
  }
  
  .ticket-name {
    margin: 0 0 1rem;
    font-size: 4vw;
  }
  
  .btn-box {
    margin: 2rem 0 0;
  }
  
  .ticket-off p {
    font-size: 4vw;
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {}