main { display: grid; justify-items: center; }

ruby { font-size: 2em; }

section { -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all .3s; transition: all .3s; width: 40%; height: 100%; border-radius: 20px; text-align: center; padding: 20px 10px; cursor: pointer; }
section:hover { -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-3px); transform: translateY(-3px); }
section:hover > img { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
section:hover > ruby { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
section > img { border-radius: 50%; -webkit-transition: all .6s; transition: all .6s; }

article { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; }

/*# sourceMappingURL=index.css.map */