@media (max-width: 1700px) {
    header {
        background-position-y: -400px;
    }
}

@media (max-width: 1200px) {
    header {
        background-position-y: -200px;
    }
}

@media (max-width: 900px) {

    header {
        background-position-y: center;
    }

    .content-wrapper {
        flex-direction: column;
        gap: 0;
    }
    .content-text {
        order: 2;
        max-width: 100%;
    }
    .content-image {
        order: 1;
        max-width: 100%;
    }
}

@media (max-width: 800px) {

    .recommendation-popup-content {
        max-width: 500px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .recommendation-popup-content, .popup-content {
        max-height: 100%;
    }
}

@media (max-width: 450px) {

    .display-name {
        max-width: 250px;
    }
}

@media (max-width: 370px) {

    .starterkit h3 {
        font-size: 1.1rem;
    }

    .starterkit p {
        -webkit-line-clamp: 3;
    }
}