.container {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 30px;
}

.media {
    margin: 0 auto;
    position: relative;

    &_img {
        opacity: 0;
        max-height: 200px;
        width: auto;

        &.dark {
            position: absolute;
            top: 0;
            left: 0;
        }

        &.visible {
            opacity: 1;
        }
    }
}

.main {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;

    &_title {
        line-height: 1.1;

        span {
            display: block;
        }
    }

    &_text {
        margin: 10px 0 15px;
    }
}

// iPhone SE
@media screen and (min-width: 375px) {
    .media_img {
        max-height: 250px;
    }

    .main {
        max-width: 250px;
    }
}

// tablet portrait
// @media screen and (min-width: 510px) {
//     .container {
//         gap: 60px;
//     }

//     .media_img {
//         max-height: 400px;
//     }

//     .main {
//         max-width: 300px;

//         &_text {
//             margin: 15px 0 30px;
//         }
//     }
// }

// // tablet landscape
// @media screen and (min-width: 1024px) {
//     .container {
//         flex-direction: row;
//         padding: 60px;
//     }

//     .media, .main {
//         margin: 0;
//     }

//     .main {
//         text-align: left;
//         max-width: unset;

//         &_title {
//             font-size: 2rem;
//             line-height: 1.2;
//             max-width: 440px;
//         }
//     }
// }

// // desktop
// @media screen and (min-width: 1280px) {
//     .media_img {
//         max-height: 500px;
//     }
// }

// @media screen and (min-width: 1366px) {
//     .container {
//         justify-content: flex-start;
//     }
//     .media_img {
//         max-height: 400px;
//     }
// }

// @media screen and (min-width: 1366px) {
//     .container {
//         gap: 100px;
//     }
//     .media_img {
//         max-height: 500px;
//     }
// }

// @media screen and (min-width: 1680px) {
//     .media_img {
//         max-height: 600px;
//     }
// }

// @media screen and (min-width: 1920px) {
//     .container {
//         justify-content: center;
//     }

//     .media_img {
//         max-height: 700px;
//     }

//     .main {
//         &_title {
//             font-size: 3rem;
//             max-width: 630px;
//         }
//     }
// }

// @media screen and (min-width: 2560px) {
//     .container {
//         gap: 150px;
//     }

//     .media_img {
//         max-height: 1000px;
//     }
// }