main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

main img {
    width: 30%;
    object-fit: cover;
    justify-self: center;
    align-items: center;
    transform: translate(290px);
 
  }

h3 {
    margin-top: -60px;
}


/* =========================
   TABLET SCREENS
   768px - 1024px
   ========================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    main img {
        width: 50%;

    }

    h3 {
        margin-top: -150px;
    }

}


/* =========================
   PHONE SCREENS
   767px and below
   ========================= */
@media screen and (max-width: 767px) {

    main {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    main img {
        width: 80%;
        max-width: 350px;
        justify-items: center;
        align-content: center;
        transform: translate(20px);
    }

    h3 {
        margin-top: -10px;
        font-size: 18px;
        text-align: center;
    }

}