html {
  scroll-behavior: smooth;
}

h1 {
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 23%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.05);
  background-color: rgba(255,255,255,1);
  transition: background-color 0.1s, box-shadow 0.1s;
}

.item:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.item:target {
  animation: target-highlight 3s ease;
}
@keyframes target-highlight {
  0% {   background-color: #FFE176; }
  65% {  background-color: #FFE176; }
  100% { background-color: #FFFFFF; }
}

.item.action .video-container {
  position: relative;
}
.item.action .video-container::after {
  content: url("/handbook/assets/video.svg");
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.2s;
}
.item.action:hover .video-container::after {
  opacity: 0;
}

.item.action .video-container.ipadframe {
  background: #4C3782;
  padding: 23px 30px 22px 30px
}

.item img, .item video {
  display: block;
  width: 100%;
  border-radius: 9px 9px 0 0;
}

.item.action .video-container.ipadframe video {
  border-radius: 7px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.item video::-webkit-media-controls {
    display:none !important;
}

.deco-text {
  font-weight: 400;
  opacity: 0.4;
}

.item .title {
  display: flex;
  align-items: baseline;
  margin-top: 25px;
  padding: 0 25px;
}

.item .title h3 {
  font-family: "Marat", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: #2A1462;
  margin-top: 0;
  margin-bottom: 0;
}

.item .title a.permalink {
  margin-left: 10px;
}

.item .title a.permalink img {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: 0.3s;
}
.item:hover .title a.permalink img {
  opacity: 0.4;
}
.item .title a.permalink img:hover {
  opacity: 0.8;
  transition: 0s;
}

.item p {
  color: var(--text-dim);
  font-size: 20px;
  padding: 5px 25px 40px 25px;
}

.item a {
  color: inherit;
  text-decoration-color: rgba(0,0,0,0.4);
}
.item a:hover{
  color: #2A1462;
  text-decoration-color: #2A1462;
}

@media only screen and (max-width: 1400px) {
  /* section {
    max-width: 1200px;
  } */
  .item {
    width: 32%;
  }
}
@media only screen and (max-width: 1100px) {
  /* section {
    max-width: 800px;
  } */
  .item {
    width: 48%;
  }
}
@media only screen and (max-width: 650px) {
  /* section {
    max-width: 450px;
  } */
  .item {
    width: 100%;
  }
}