item-container { display: flex; flex-direction: row; max-width: 1800px; min-width: 360px; width: 95%; max-height: 100%; justify-self: center; margin: 10px auto 40px; position: relative; }
item-container a { display: block; width: 50%; margin: 0px auto; }
item-container img { max-width: 100%; max-height: 100%; margin: 0px auto; box-shadow: var(--gray-color) 1px 1px 1px 1px; border-radius: 7px; display: block; }
item-container img:hover { box-shadow: var(--green-color) 1px 1px 1px 2px; }
item-container item-note { display: inline-block; right: 1px; top: 88px; rotate: -19deg; color: rgb(255, 0, 0); font-size: 400%; letter-spacing: 18px; word-spacing: 30px; align-content: center; border-radius: 7px; }
item-info { display: flex; flex-direction: column; width: 50%; }
item-title { display: block; font-size: 300%; text-align: center; margin: 5px 0px; }
item-text { display: block; font-size: 125%; margin: 5px 0px; line-height: 120%; }
item-group { display: block; font-size: 100%; margin: 5px 0px; }
item-group a { display: block; width: fit-content; text-align: center; font-size: 115%; line-height: 150%; border-radius: 7px; padding: 0px 10px; box-shadow: var(--gray-color) 3px 2px 1px 1px; }
item-group a:hover { background-color: var(--green-color); color: var(--white-color); }
item-keywords { display: block; font-size: 70%; margin: 5px 0px; }
@media screen and (max-width: 720px) {
  item-container { flex-direction: column; }
  item-container a { width: 90%; margin: 0px auto; max-width: 570px; min-width: 350px; }
  item-info { width: 90%; margin: 0px auto; max-width: 570px; min-width: 350px; }
}