/* Animations */
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } }
/*Scale animation*/
@-webkit-keyframes scale { 25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); } }
@keyframes scale { 25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); } }
.grid-items { margin: 3rem 0 4rem; padding: 0 7rem; width: calc(100%); }
.grid-items .grid-title { font-size: 2em; color: #0C536B; margin-bottom: 2rem; font-family: 'AncizarSans-BoldItalic', sans-serif; }
.grid-items .items-content { display: grid; gap: 2rem; }
.grid-items .items-content .content { display: block; position: relative; }
.grid-items .items-content .content .image { display: block; position: relative; }
.grid-items .items-content .content .item-info { color: #fff; position: absolute; height: 100%; width: 100%; left: 0; top: 0; margin: 0; overflow: hidden; text-align: center; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.2em 7em; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.grid-items .items-content .content .item-info .name { font-family: 'AncizarSans-Black', sans-serif; font-size: 2em; text-transform: none; display: block; line-height: 1.15; position: relative; }
.grid-items .items-content .content .item-info .name.big_string { font-size: 1.25em; padding-top: 0; }
.grid-items .items-content .content .item-info .name::after { opacity: 0; position: absolute; top: 120%; content: '+ INFO'; background-color: #fff; border: 1px solid #fff; color: #5d5d5d; font-size: 0.6em; padding: 0.25em 1em; left: 0; right: 0; margin: 0 auto; width: 100px; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.grid-items .items-content .content .item-info::before { content: ''; bottom: 1em; top: 1em; left: 1em; right: 1em; position: absolute; border: 2px solid #fff; }
.grid-items .items-content .content:hover .item-info, .grid-items .items-content .content:active .item-info, .grid-items .items-content .content:focus .item-info { background-color: rgba(0, 0, 0, 0.6) !important; }
.grid-items .items-content .content:hover .item-info .name::after, .grid-items .items-content .content:active .item-info .name::after, .grid-items .items-content .content:focus .item-info .name::after { opacity: 1; }

@media screen and (max-width: 40em) { .grid-items { padding: 0 2.5rem; }
  .grid-items .grid-title { font-size: 1.5em; }
  .grid-items .items-content { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
  .grid-items .items-content .content .item-info .name.big_string { padding-bottom: 0em !important; font-size: 1.45rem; line-height: 1.1; }
  .grid-items .items-content .content .item-info { padding: 0.5em !important; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .grid-items .items-content .content .item-info .name { font-size: 1.45rem; line-height: 1.1; } }