.usages{background-color:var(--color-light_gray);grid-column:center-start/center-end;display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));grid-template-rows:auto auto;row-gap:2rem;column-gap:2rem;gap:5rem;padding:4.5rem}@media only screen and (max-width:58em){.usages{grid-template-columns:repeat(2,minmax(25rem,1fr))}}@media only screen and (max-width:37.5em){.usages{grid-template-columns:repeat(1,minmax(25rem,1fr))}}.usages__title{padding:4rem;display:grid;grid-template-columns:1fr;row-gap:1.5rem;grid-column:1/-1;text-align:center}.usage__info h3{padding-top:4rem;color:var(--color-green);text-transform:uppercase;text-decoration:none;position:relative;letter-spacing:.2rem;text-align:center}@media only screen and (max-width:78em){.usage__info h3{font-size:1.6rem}}@media only screen and (max-width:62.5em){.usage__info h3{font-size:2rem}}@media only screen and (max-width:58em){.usage__info h3{font-size:2rem}}@media only screen and (max-width:37.5em){.usage__info h3{font-size:3rem}}.usage__info p{padding-top:2rem;color:var(--color-dark_gray);text-decoration:none;font-style:italic;font-size:2rem;border-top:1px solid rgba(255,255,255,.5);text-align:center}@media only screen and (max-width:78em){.usage__info p{font-size:2rem}}@media only screen and (max-width:62.5em){.usage__info p{font-size:2rem}}@media only screen and (max-width:58em){.usage__info p{font-size:2rem}}@media only screen and (max-width:37.5em){.usage__info p{font-size:4rem}}.usage__item-hover a{text-decoration:none}@media (hover:hover){.usage{align-items:center;display:flex;justify-content:center}.usage__icon{fill:var(--color-orange);width:4.5rem;height:4.5rem;padding:1rem}.usage__info{font-size:2rem}.usage__text{font-size:1.5rem;padding-top:1rem}}@media only screen and (hover:hover) and (max-width:37.5em){.usage{align-items:center;display:flex;justify-content:center}}@media (hover:hover){.usage__item-hover{position:relative;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.usage__item-hover,.usage__item-hover *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.usage__item-hover a:hover{text-decoration:none}.usage__item-hover .usage__img{width:100%;height:100%}.usage__item-hover.square{position:relative;width:20rem;height:20rem;margin:40px 0}.usage__item-hover.square .usage__img{position:relative;width:20rem;height:20rem;margin:40px 0}.usage__item-hover.square .usage__info{position:absolute;top:0;bottom:0;left:0;right:0;padding:2.5rem;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}.usage__item-hover.square.effect .usage__info{background:var(--color-orange);pointer-events:none;opacity:0;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.usage__item-hover.square.effect .usage__info h3{color:var(--color-light_gray);text-transform:uppercase;position:relative;letter-spacing:.2rem;font-size:1.7rem;text-shadow:0 0 1px #fff,0 1px 2px rgba(0,0,0,.3)}.usage__item-hover.square.effect .usage__info p{color:var(--color-light_gray);padding:1rem .5rem;font-style:italic;font-size:12px;border-top:1px solid rgba(255,255,255,.5)}.usage__item-hover.square.effect .usage__img{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.usage__item-hover.square.effect.left_to_right .usage__img{-webkit-transform:scale(1) translateX(0);-moz-transform:scale(1) translateX(0);-ms-transform:scale(1) translateX(0);-o-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}.usage__item-hover.square.effect.left_to_right .usage__info{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}.usage__item-hover.square.effect.left_to_right a:hover .usage__img{-webkit-transform:scale(.1) translateX(100%);-moz-transform:scale(.5) translateX(100%);-ms-transform:scale(.5) translateX(100%);-o-transform:scale(.5) translateX(100%);transform:scale(.5) translateX(100%)}.usage__item-hover.square.effect.left_to_right a:hover .usage__info{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}