@import url("styles-template.css");
@import url("styles-topics.css");

body {
    color:#000;
    font-size: 12px;
    width: 100vw;
    & .bold {
        font-weight: bold;
    }
}
.main-content {
    & span {
        margin-top: 1rem;
        max-width: 100vw;
    }
}
.archive {
    grid-row-start: 1;
    grid-column-start: 9;
    margin-right: 1rem;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 75%;
}
.classes {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5rem 1rem 0 1rem;

    & p {
        margin-bottom: .5rem;
    }
}

span.title {
    font-size: 14px;
    font-weight: bold;
    margin-left: 0;
}
.info {
    /* display: flex; */
    flex-wrap: wrap;
    margin-top: 2rem;
    margin-left: 1rem;
    line-height: 2;
}
.pics {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* justify-content: space-between; */
    margin-right: 1rem;
    align-items: center;
    flex: 0 1 100%;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    margin-top: 2rem;
    margin-left: 1.5rem;
    max-width: 100%;
    & img {
        max-width: 200px;
        height: auto;
    }
    
}




/* *************** Media queries ****************** */

@media screen and (min-width: 650px) {
    .main-content {
        /* grid-template-rows: repeat(12, 4rem); */
        display: flex;
        justify-content: space-around;
        /* display: flex; */
    }
    .wrapper {
        grid-row-start: 3;
    }
    .archive {
        grid-column-start: 1;
        margin-left: 1rem;
    }

    .classes {
        /* grid-row-start: 3; */
        /* justify-self: center; */
        max-width: 93rem;
    
    }
    .pics {
        /* justify-content: stretch; */
        /* display: flex; */
        justify-content: start;
    }
}



@media screen and (min-width: 720px) {
    .archive {
        /* grid-column-start: 4; */
        grid-column: 3 / 12;
        margin-left: 1rem;
    }
    .info{
       flex: 0 1 100%;
       margin-left: 1rem;
    }
    .pics img {
        max-width: 20rem;
    }
}
@media screen and (min-width: 1120px) {
    .info {
        font-size: 12px;
        /* margin-left: 18rem; */
        
    }
    .archive {
        grid-column-start: 8;
        max-width: 70rem;
        margin-left: 20rem;
        

        & span {
            font-size: 16px;
            margin-top: 0;
        }
    }
    .classes {
        grid-column-start: 8;
        
        & .pics {
            justify-content: space-around;
            /* column-gap: 7rem; */
            /* margin-left: 10rem; */
        }
    }
    
}
@media screen and (min-width: 1240px) {
    .archive {
        margin-left: 41rem;
    }
    .classes {
        /* padding-left: 20rem; */
        .pics {
            justify-content: flex-start;
            /* margin-left: 20rem; */
            column-gap: 4rem;
        }
        
    }
    
}