/*
|--------------------------------------------------------------------------
| Celebrity Intro Tables Responsive CSS
|--------------------------------------------------------------------------
| Dedicated Responsive Layer
| UltraWide → Desktop → Laptop → Tablet → Mobile
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Ultra Wide Screens
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 2200px) {

    .cit-wrapper {

        max-width: 1700px;

        padding-left: 50px;
        padding-right: 50px;
    }

    .cit-row {

        grid-template-columns:
            420px
            minmax(0, 1fr);

        gap: 24px;
    }

    .cit-label,
    .cit-value {

        font-size: 24px;

        padding: 28px;
    }

    .cit-image {

        width: 280px;
        height: 280px;
    }
}

/*
|--------------------------------------------------------------------------
| 4K Screens
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1800px) and (max-width: 2199px) {

    .cit-wrapper {

        max-width: 1500px;
    }

    .cit-row {

        grid-template-columns:
            360px
            minmax(0, 1fr);
    }

    .cit-label,
    .cit-value {

        font-size: 21px;

        padding: 24px;
    }

    .cit-image {

        width: 240px;
        height: 240px;
    }
}

/*
|--------------------------------------------------------------------------
| Large Desktop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1600px) {

    .cit-wrapper {

        max-width: 1300px;
    }

    .cit-row {

        grid-template-columns:
            320px
            minmax(0, 1fr);
    }
}

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1280px) {

    .cit-wrapper {

        max-width: 1100px;
    }

    .cit-label,
    .cit-value {

        font-size: 17px;
    }
}

/*
|--------------------------------------------------------------------------
| Laptop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1024px) {

    .cit-wrapper {

        max-width: 920px;

        padding-left: 18px;
        padding-right: 18px;
    }

    .cit-row {

        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 14px;
    }

    .cit-label,
    .cit-value {

        font-size: 16px;

        padding: 16px;
    }

    .cit-image {

        width: 170px;
        height: 170px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet Landscape
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 900px) {

    .cit-wrapper {

        margin-top: 120px;
    }

    .cit-row {

        grid-template-columns:
            200px
            minmax(0, 1fr);
    }

    .cit-label {

        justify-content: flex-start;

        text-align: left;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet Portrait
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 768px) {

    .cit-wrapper {

        width: calc(100% - 20px);

        margin-left: auto;
        margin-right: auto;

        padding-left: 14px;
        padding-right: 14px;
    }

    .cit-row {

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .cit-label,
    .cit-value {

        width: 100%;

        min-width: 100%;
    }

    .cit-label {

        text-align: left;

        justify-content: flex-start;
    }

    .cit-image {

        width: 150px;
        height: 150px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile Landscape
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 640px) {

    .cit-wrapper {

        margin-top: 100px;

        padding-bottom: 24px;
    }

    .cit-label,
    .cit-value {

        font-size: 14px;

        padding: 14px;
    }

    .cit-image {

        width: 130px;
        height: 130px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile Portrait
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 480px) {

    .cit-wrapper {

        width: calc(100% - 12px);

        margin-top: 85px;

        padding-left: 10px;
        padding-right: 10px;

        border-width: 2px;
    }

    .cit-row {

        gap: 8px;
    }

    .cit-label,
    .cit-value {

        font-size: 13px;

        line-height: 1.6;

        padding: 12px;
    }

    .cit-image {

        width: 110px;
        height: 110px;

        border-width: 4px;
    }
}

/*
|--------------------------------------------------------------------------
| Small Phones
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 360px) {

    .cit-wrapper {

        width: calc(100% - 8px);
    }

    .cit-label,
    .cit-value {

        font-size: 12px;

        padding: 10px;
    }

    .cit-image {

        width: 95px;
        height: 95px;
    }
}

/*
|--------------------------------------------------------------------------
| Foldable Devices
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 280px) {

    .cit-wrapper {

        overflow-x: hidden;
    }

    .cit-label,
    .cit-value {

        font-size: 11px;

        padding: 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Landscape Phones
|--------------------------------------------------------------------------
*/

@media screen and (max-height: 500px) and (orientation: landscape) {

    .cit-wrapper {

        margin-top: 80px;
    }

    .cit-image {

        width: 90px;
        height: 90px;
    }
}

/*
|--------------------------------------------------------------------------
| Touch Devices
|--------------------------------------------------------------------------
*/

@media (hover: none) {

    .cit-label,
    .cit-value {

        -webkit-tap-highlight-color: transparent;
    }
}