@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| Use Only Information Page and accompanying components
|--------------------------------------------------------------------------
*/

/* #information */
#information .information-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-large);
  margin-top: var(--spacing-large);
}
#information .information-list .information-item a {
  display: block;
  padding: var(--spacing-medium);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-medium);
  text-decoration: none;
  color: var(--color-primary);
  transition: transform 0.5s ease-in-out;
}
#information .information-list .information-item .thumbnail {
  overflow: hidden;
  border-radius: var(--border-radius-medium);
  margin-bottom: var(--spacing-small);
}
#information .information-list .information-item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
  transition: transform 0.5s ease-in-out;
}

/* .infromation-grid */
.infromation-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--spacing-large);
}
.infromation-grid .information-content {
  width: 100%;
}
.infromation-grid .information-sidebar {
  width: 100%;
  height: 100%;
  margin-top: var(--spacing-large);
}
.infromation-grid .information-sidebar .information-sidebar-content {
  position: sticky;
  top: calc(var(--spacing-xlarge) * 3);
}

@media (max-width: 820px) {
  #information .information-list {
    grid-template-columns: 1fr 1fr;
  }
  .infromation-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #information .information-list {
    grid-template-columns: 1fr;
  }
}

/* hover animation */
@media (min-width: 1028px) {
  #information .information-list .information-item a:hover {
    box-shadow: var(--box-shadow-large);
  }
  #information .information-list .information-item a:hover .thumbnail img {
    transform: scale(1.05);
  }
}