Another Dungeon Grid.css

From Another Eden Wiki

.adgrid-container {

   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: flex-start;
   align-content: flex-start;

}

.adgrid {

   margin: 1em .5em;
   border: 1px solid #333;
   padding: .5em;
   display: grid;
   grid-template-areas:
       "adimage adimage adimage"
       "adname adname adname"
       "eratext weaknesstext resiststext"
       "eraicon weaknessicon resistsicon"
       "eraicon absorbstext thirdrewardtext"
       "eraicon absorbsicon thirdrewardicon"
       "tomes tomes tomes";
   grid-column-gap: .2em;
   grid-row-gap: .2em;

}

.adgrid .adimage {

   grid-area: adimage;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   align-content: center;

}

.adgrid .eratext {

   grid-area: eratext;
   display: flex;
   justify-content: center;

}

.adgrid .weaknesstext {

   grid-area: weaknesstext;
   display: flex;
   justify-content: center;

}

.adgrid .resiststext {

   grid-area: resiststext;
   display: flex;
   justify-content: center;

}

.adgrid .eraicon {

   grid-area: eraicon;
   display: flex;
   justify-content: center;

}

.adgrid .weaknessicon {

   grid-area: weaknessicon;
   display: flex;
   justify-content: center;

}

.adgrid .resistsicon {

   grid-area: resistsicon;
   display: flex;
   justify-content: center;

}

.adgrid .absorbstext {

   grid-area: absorbstext;
   display: flex;
   justify-content: center;

}

.adgrid .thirdrewardtext {

   grid-area: thirdrewardtext;
   display: flex;
   justify-content: center;

}

.adgrid .absorbsicon {

   grid-area: absorbsicon;
   display: flex;
   justify-content: center;

}

.adgrid .thirdrewardicon {

   grid-area: thirdrewardicon;
   display: flex;
   justify-content: center;

}

.adgrid .tomes {

   grid-area: tomes;
   display: flex;
   flex-direction: column;
   justify-content: center;

}

.adgrid .tomes .mw-collapsible {

   margin-top: -1.5em;

}

.adgrid .tomes span {

   align-self: center;

}