/* -------------------------------------------------------------|
| START OF 30_RESOURCES.CSS.
|---------------------------------------------------------------| */

/* -------------------------------------------------------------|
| GRID LAYOUT FOR JOURNALS PAGE.
|---------------------------------------------------------------| */

.journals {
    display: grid;
    grid-template-columns: repeat(2, 120px);
    grid-template-rows: repeat(6, 240px);
    column-gap: 30px;
    row-gap: 10px;  
    align-items: center;
    justify-content: center;
    background-color: #d9d9d9;
    
    margin: 1rem 0rem 0rem 0rem; 
    padding: 2rem 0rem 2rem 0rem;
}

@media (min-width: 550px) {    
    .journals {
        grid-template-columns: repeat(3, 120px);
        grid-template-rows: repeat(4, 240px);
        column-gap: 40px;
    }
}

@media (min-width: 650px) {    
    .journals {
        grid-template-columns: repeat(4, 120px);
        grid-template-rows: repeat(3, 240px);
    }
}

@media (min-width: 1024px) {    
    .journals {
        grid-template-columns: repeat(6, 120px);
        grid-template-rows: repeat(2, 240px);
    }
}

.journals img {
    width: 120px;
    height: auto;
    align-items: center;
    border: 1px solid black; 
}

.journals p { 
    width: 120px;
    height: auto;
    margin: 0.5rem 0rem 0rem 1rem;
    padding: 0rem 0rem 0rem 0.2rem;
}

@media (min-width: 768px) {    
    .journals p { 
        padding: 0rem 0.4rem 0rem 0rem;
    }
}