[case-gallery] {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin-top: 2em;
}

[case] {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(100% / 3 - .2em);
   height: 20vw;
   margin: .1em;
   padding: 1em;
   font-size: 1.2em;
   text-align: center;
   color: transparent;
   text-shadow: 1px 1px 4px transparent;
   transition: .3s;
   overflow: hidden;
}

[case]:hover {
   color: #fff;
   text-shadow: 1px 1px 4px black;
   transition-delay: .2s;
}

[case]::before {
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   content: '';
   transition: .3s;
   background-color: rgba(0, 0, 0, 0);
}

[case]:hover::before {
   background-color: rgba(0, 0, 0, .6);
}

[case] img {
   position: absolute;
   z-index: -2;
   top: 0;
   left: 0;
}


/******* for article ones **/

[article-case-gallery] {
   width: 100%;
   margin-top: 2em;
   border-top: thin solid #f2f2f2;
}

[article-case-gallery] main {
   margin-top: 0;
   padding-left: 2em;
   padding-right: 2em;
}

[article-case-gallery] h1 {
   width: 100%;
   padding: 2em;
   text-transform: uppercase;
   text-align: center;
}

[article-case-gallery] .title {
   display: none;
}

[article-case-gallery] [case] {
   width: calc(100% / 5 - .2em);
   height: 10vw;
   margin: .1em;
   padding: 1em;
   font-size: .9em;
}

@media only screen and (max-width: 1100px) {
   [case] {
      width: calc(100% / 2 - .2em);
      height: 25vw;
   }
   [article-case-gallery] [case] {
      width: calc(100% / 3 - .2em);
      height: 18vw;
   }
   .buttons-container {
      right: 5vw;
      width: 90vw;
   }
}

@media only screen and (max-width: 700px) {
   [case] {
      width: calc(100% / 1 - .2em);
      height: 50vw;
   }
   [article-case-gallery] main {
      padding-left: 1em;
      padding-right: 1em;
   }
   [article-case-gallery] [case] {
      width: calc(100% / 2 - .2em);
      height: 25vw;
   }
}


/**/


/**/


/**/


/**/


/** basic style for buttons and tags **/

.buttons-container {
   border-top-left-radius: .3em;
   border-bottom-left-radius: .3em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   background-color: #1EAAB4;
   padding-right: 1em;
/*
   position: fixed;
   right: 0;
   top: 20vh;
*/
   align-self: flex-end;
   color: #fff;
   box-shadow: .1em .3em .5em rgba(0, 0, 0, .2);
   transition: .3s;
   z-index: 99;
}

.buttons-container button {
   margin: .1em;
   padding-top: .2em;
   padding-bottom: .2em;
   padding-left: .6em;
   padding-right: .6em;
   text-align: center;
   white-space: nowrap;
   transform-origin: center;
   overflow: hidden;
   transition: .3s;
}

a[case] {
   animation: show-tag .7s ease-in-out forwards;
}

a[case].hide-tags {
   animation: hide-tag .7s .6s ease-in-out forwards;
   position: absolute;
}

@keyframes show-tag {
   0% {
      max-width: 0;
      margin: 0;
      padding: 0;
   }
   100% {
      max-width: 100%;
   }
}

@keyframes hide-tag {
   0% {
      max-width: 100%;
   }
   100% {
      max-width: 0%;
      margin: 0;
      padding: 0;
   }
}


/** accessibility for buttons **/

.buttons-container button:hover {
   background-color: rgba(0, 0, 0, .1);
}

.buttons-container button:active,
.buttons-container button:active:focus {
   transform: scale(.9);
}

.buttons-container button:focus {
   z-index: 1;
   position: relative;
   box-shadow: 0 0 .2em .15em #006EFF;
}