@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
body {
  font-family: "Open Sans", system-ui, sans-serif;
  background: linear-gradient(to left, #23a6d5, #e73c7e);
      display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
* {
  box-sizing: border-box;
}
.quick-links {
  background: #d9dade;
  max-width: 1024px;
  width: 100%;
  padding: 30px;
  margin: 0 auto;
  corner-shape: squircle;
  border-radius: 60px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 35px 45px -30px rgb(0 0 0 / 7%),
    0 10px 12px -8px rgb(0 0 0 / 8%), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}
.quick-item {
  height: 144px;
  width: 186px;
  background-color: #ffffff7d;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #242424;
  box-shadow: 0 11px 30px -7px rgba(0, 0, 0, 0.1);
  corner-shape: squircle;
  border-radius: 40px;
  background-image: url("http://hutdb.net/assets/img/quick-links.jpg");
  transition: 0.25s all ease;
}
.quick-item:last-child {
  margin-right: 0;
}
.rotated-box {
	content: "";
	height: 442px;
	width: 442px;
	position: absolute;
	left: 0px;
	top: 52px;
	transform: rotate(-31.7deg);
	transition: 0.45s all ease;
}
.quick-item.team-builder {
  background-position: 0px 0px;
}
.quick-item.draft-champions {
  background-position: 592px 0px;
}
.quick-item.pack-opener {
  background-position: 296px 0px;
}
.quick-item .quick-inner {
  text-align: right;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 300;
  bottom: 20px;
  right: 20px;
  position: absolute;
  transition: 0.45s all ease;
}
.quick-item .quick-inner span {
  font-weight: bold;
  display: block;
  margin-top: -5px;
}

.quick-item:hover .rotated-box {
  top: 0px;
  opacity: 0.8;
  transform: scale(1.1) rotate(-90deg);
}
.quick-item:hover .quick-inner {
  right: 40px;
}
.quick-item:hover {
  color: #242424;
  background-color: #fff;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.24);
  transform: scale(1.02);
  border-radius: 50px;
}
