@import url('./variables.css');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

.world-container {    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px;
    width: calc(100% - 40px);
}

.world {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 10px solid var(--green);
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.kids-section {
    border: 10px solid var(--blue); 
    margin: 0px 20px;
}

.kids-section,
.teachers-section,
.researchers-section {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.teachers-section {
    border: 10px solid var(--pink); 
    margin: 20px 20px;
}

.researchers-section {
    border: 10px solid var(--green); 
    margin: 20px 20px;
}

.k-p-1,
.k-p-2,
.k-p-3,
.k-p-4,
.t-p-1,
.t-p-2,
.r-p-1,
.r-p-2  {
    padding: 30px;
    border: 5px solid var(--black);
    border-radius: 5px;
    margin: 0 0 15px 0;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.k-p-1,
.k-p-2,
.k-p-3,
.k-p-4 {
    background: var(--gradient-blue);
}

.t-p-1,
.t-p-2 {
    background: var(--gradient-pink);
}

.r-p-1,
.r-p-2 {
    background: var(--gradient-green);
}

.star-exhibition,
.kids-chemistry,
.mammoth,
.star-club,
.school-trip,
.kids-experiment,
.library,
.researchers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    border: 5px solid var(--black);
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

@media (min-width:600px) {    
    .world {
        width: 100%;
        max-width: 860px;
        margin: 20px 100px 0 100px;
    }

    .kids-grid,
    .teachers-grid,
    .researchers-grid {
        padding: 20px;
        gap: 2rem;
    }

    .kids-grid {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(6, auto);
    }

    .k-p-1 {
        grid-column: 1;
        padding: 15px;
        margin: 0;
    }

    .star-exhibition,
    .kids-chemistry,
    .mammoth,
    .star-club {
        object-fit: cover;
        margin: 0;
    }

    .star-exhibition {
        grid-column: 2;
        height: 225px;
    }

    .kids-chemistry {
        grid-column: span 2;
        height: 250px;
    }

    .k-p-2 {
        grid-column: span 2;
        margin: 0;
    }

    .mammoth {
        grid-column: span 2;
        height: 200px;
    }

    .k-p-3 {
        grid-column: 1;
        padding: 15px;
        margin: 0;
    }

    .star-club {
        grid-column: 2;
        height: 200px;
    }

    .k-p-4 {
        grid-column: span 2;
        margin: 0;
    }

    .k-p-1,
    .k-p-2,
    .k-p-3,
    .k-p-4,
    .t-p-1,
    .t-p-2,
    .r-p-1,
    .r-p-2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .teachers-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1fr;
    }

    .school-trip,
    .kids-experiment,
    .library,
    .researchers {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }


    .school-trip {
        grid-column: 1;
        grid-row: span 2;
    }

    .t-p-1 {
        grid-column: 2;
        grid-row: span 2;
        margin: 0;
    }

    .kids-experiment {
        grid-column: 1;
        grid-row: 3;
    }

    .t-p-2 {
        grid-column: 2;
        grid-row: 3;
        height: 100%;
    }

    .researchers-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1fr;
    }

    .library {
        grid-column: 1;
        grid-row: span 2;
    }

    .r-p-1 {
        grid-column: 2;
        grid-row: span 2;
        height: 100%;
    }

    .researchers {
        grid-column: 1;
        grid-row: 3;
    }

    .r-p-2 {
        grid-column: 2;
        grid-row: 3;
        height: 100%;
    }
}

@media (min-width:875px) {
    .kids-grid {
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(3,auto);
    }

    .k-p-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .star-exhibition {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .kids-chemistry {
        grid-column: 3;
        grid-row: 1;
    }

    .k-p-2 {
        grid-column: span 2;
        grid-row: 2;
    }

    .mammoth {
        grid-column: 3;
        grid-row: 2;
    }

    .k-p-3 {
        grid-column: 1;
        grid-row: 3;
    }

    .star-club {
        grid-column: 2;
        grid-row: 3;
        width: 100%;
        height: 100%;
    }

    .k-p-4 {
        grid-column: 3;
        grid-row: 3;
    }

    .teachers-grid,
    .researchers-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .school-trip {
        grid-column: 1;
        grid-row: span 2;
    }

    .t-p-1 {
        grid-column: 2;
        grid-row: span 2;
    }

    .kids-experiment {
        grid-column: 3;
        grid-row: 1;
    }

    .t-p-2 {
        grid-column: 3;
        grid-row: 2;
        height: 100%;
    }

    .library {
        grid-column: 1;
        grid-row: 1;
    }

    .r-p-1 {
        grid-column: 1;
        grid-row: 2;
    }

    .researchers {
        grid-column: 2;
        grid-row: span 2;
    }

    .r-p-2 {
        grid-column: 3;
        grid-row: span 2;
    }
}

@media (min-width:1210px) {
    .kids-section,
    .teachers-section,
    .researchers-section {
        margin: 30px 150px;
        padding: 20px 50px;
    }
}