#Components{flex-direction:column;gap:1.875rem;width:100vw;max-width:100%;padding-block:2.5rem;padding-inline:4vw;display:flex}@media screen and (min-width:64.0625em){#Components{padding-inline:12vw}}@media screen and (min-width:127.5em){#Components{padding-inline:20vw}}#Components .components{flex-direction:column;gap:1rem;display:flex}@media screen and (min-width:51.25em){#Components .components{grid-template-columns:repeat(2,1fr);display:grid}}@media screen and (min-width:64.0625em){#Components .components{grid-template-columns:repeat(4,1fr)}}#Components .components a{color:#131314;border:.0625rem solid #131314;justify-content:space-between;align-items:center;width:100%;padding:1.25rem;font-size:1.125rem;display:flex;position:relative;overflow:hidden}@media screen and (min-width:64.0625em){#Components .components a{transition:color .3s cubic-bezier(.45,0,.55,1),border .3s cubic-bezier(.45,0,.55,1)}#Components .components a:before{content:"";z-index:-1;background-color:#db2f27;width:100%;height:100%;transition:top .25s cubic-bezier(.45,0,.55,1);position:absolute;top:100%;left:0}#Components .components a:hover{color:#f5f5f7;border:.0625rem solid #db2f27}#Components .components a:hover:before{top:0}#Components .components a:hover .left p{color:#f5f5f7}}#Components .components a .left{flex-direction:column;gap:.625rem;max-width:80%;display:flex}#Components .components a .left h4{font-weight:600}#Components .components a .left p{color:#131314;font-size:.875rem;transition:color .25s cubic-bezier(.45,0,.55,1)}