@media (max-width: 1380px) {
    header, .content {
        max-width: 1100px;
        width: 100%;
        margin: 40px auto;
        padding: 0 15px;
    }
    .main {
        max-width: 350px;
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 40px;
        margin-right: 24px;
    }
    .main h2 {
    font-size: 54px;
    }
    .name {
        max-width: 380px;
        width: 100%;
        padding: 32px;
    }
    .program {
        max-width: 300px;
        width: 100%;
    }
    .works, .courses {
        max-width: 340px;
        width: 100%;
    }
    .works img {
        margin-left: -50px;
    }
    .courses {
        background-size: cover;
    }
    .info {
        max-width: 585px;
        width: 100%;
        padding: 32px;
    }
}
@media (max-width: 1090px) {
  .name {
    max-width: 100%;
    margin-bottom: 0;
  }
  .figma {
    margin: 0;
  }
  .program {
    display: flex;
    justify-content: center;
    max-width: 350px;
    margin: 24px auto;
    padding: 32px;
  }
  .program img {
    width: 48px;
  }
  .works, .courses {
    max-width: 49%;
    
  }
  .works img {
    width: 100%;
    margin: 0;
  }
  .courses h3 {
    left: 40%;
    transform: translate(-30%, 0%);
  }
  .image {
    max-width: 252px;
    width: 100%;
  }
  .info {
    padding: 32px;
    max-width: 564px;
    width: 100%;
  }
}
@media (max-width: 767px) {
    .logo {
        width: 150px;
    }
    .content {
        flex-wrap: wrap;
        justify-content: center;
    }
    .main {
        margin-right: 0;
        margin-bottom: 24px;
    }
    .image {
        margin-bottom: 24px;
    }
    .courses {
        height: 235px;
    }
}
@media (max-width: 450px) {
    .hire {
        width: 160px;
    }
    .btn {
        width: 120px;
    }
    .works {
        max-width: 100%;
        margin-bottom: 24px;
    }
    .courses, .image {
        max-width: 100%;
    }
    .courses {
        height: 235px;
    }
}