.my-layout {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  gap: 20px;
}
@media screen and (max-width: 1023.9px) {
  .my-layout {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    padding-top: 20px;
    gap: 10px;
  }
}
.my-layout > * {
  align-self: stretch;
}

@media screen and (min-width: 1023.9px) {
  .my-box {
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.03);
    padding: 30px;
  }
}

.my-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  margin-bottom: 20px;
}
@media screen and (max-width: 1023.9px) {
  .my-head {
    align-items: flex-start;
  }
}
.my-head__user {
  font-size: 30px;
  font-weight: 700;
}
@media screen and (max-width: 1023.9px) {
  .my-head__user {
    font-size: 22px;
  }
}

.my-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  margin-top: 30px;
}
@media screen and (max-width: 1023.9px) {
  .my-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .my-footer .btn {
    margin-left: auto;
    margin-top: 15px;
  }
}