*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@media only screen and (max-width: 375px) {
    .centered {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .bg-image {
        height: 28vh;
    }
}
@media only screen and (width: 425px) {
    .centered {
        top: 24%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .bg-image {
        height: 28vh;
    }
}

@media only screen and (min-width: 768px) {
    .centered {
        top: 17%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
@media only screen and (min-width: 1024px) {
    .centered {
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
@media only screen and (width: 1366px) {
    .centered {
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media only screen and (min-width: 1440px) {
    .centered {
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
@media only screen and (min-width: 2560px) {
    .centered {
        top: 8%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}