:root {
  --icon-dribbble: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1928_1364)'%3E%3Cpath d='M32.6535 8.71566C31.0886 6.03463 28.9658 3.91188 26.2847 2.34702C23.6031 0.782233 20.6758 0 17.5005 0C14.3255 0 11.3973 0.782233 8.71622 2.34702C6.03495 3.91164 3.9122 6.03439 2.34726 8.71566C0.782233 11.3971 0 14.3253 0 17.5C0 20.6749 0.782472 23.6027 2.34702 26.2843C3.91188 28.9653 6.03463 31.088 8.7159 32.6531C11.3973 34.2178 14.3253 35.0001 17.5002 35.0001C20.6751 35.0001 23.6034 34.2178 26.2847 32.6531C28.9658 31.0886 31.0884 28.9653 32.6532 26.2843C34.2178 23.6029 34.9999 20.6748 34.9999 17.5C35 14.325 34.2178 11.3967 32.6535 8.71566ZM17.5003 2.55213C21.2675 2.55213 24.5564 3.79775 27.3667 6.28891L27.0818 6.68741C26.9679 6.84719 26.6831 7.15447 26.2275 7.61043C25.7719 8.066 25.2743 8.49921 24.7351 8.90928C24.1954 9.31952 23.4629 9.78657 22.5359 10.3107C21.6092 10.8348 20.6219 11.2946 19.5735 11.6895C17.8267 8.46873 15.9584 5.56726 13.9683 2.98495C15.1686 2.69635 16.3458 2.55213 17.5003 2.55213ZM5.78825 8.22538C7.24649 6.38764 9.02357 4.97465 11.1201 3.98739C13.0038 6.49387 14.8569 9.36517 16.68 12.6007C12.0619 13.816 7.45919 14.4237 2.87146 14.4235C3.35783 12.1298 4.33002 10.0635 5.78825 8.22538ZM3.55481 22.8895C2.88631 21.1806 2.55213 19.3839 2.55213 17.5C2.55213 17.2873 2.55996 17.1277 2.57496 17.0215C8.07438 17.0215 13.1863 16.3153 17.9107 14.9023C18.3969 15.844 18.7995 16.6872 19.1185 17.4317C19.0569 17.462 18.9589 17.496 18.8221 17.5341C18.6849 17.5721 18.5864 17.5984 18.5251 17.6139L17.6823 17.91C17.1047 18.1228 16.3488 18.4875 15.4149 19.0037C14.4808 19.5207 13.4896 20.1356 12.4413 20.8497C11.3931 21.564 10.3107 22.5096 9.19429 23.6873C8.07773 24.8645 7.1397 26.1288 6.38014 27.4807C5.16485 26.1288 4.22315 24.5979 3.55481 22.8895ZM17.5003 32.4482C13.9455 32.4482 10.7706 31.3087 7.97533 29.0303L8.31716 29.281C8.84879 28.111 9.63102 26.9868 10.6643 25.9084C11.6973 24.8301 12.6923 23.96 13.6493 23.299C14.6063 22.6386 15.6468 22.0159 16.7711 21.4303C17.8952 20.8458 18.6619 20.4733 19.0725 20.3143C19.4827 20.1548 19.8094 20.0292 20.0524 19.9379L20.0977 19.915H20.1436C21.6319 23.819 22.6958 27.6019 23.3335 31.2629C21.4498 32.0532 19.5057 32.4479 17.5003 32.4482ZM30.0791 25.5779C28.9548 27.3175 27.5494 28.7571 25.8637 29.8961C25.2403 26.4022 24.2686 22.8395 22.9466 19.2091C25.9696 18.7377 29.0761 18.9584 32.2663 19.8695C31.932 21.9355 31.2027 23.8387 30.0791 25.5779ZM32.2204 17.295C32.0685 17.2648 31.8784 17.2304 31.6506 17.1926C31.4228 17.1549 31.1453 17.109 30.8187 17.0559C30.4925 17.0027 30.1273 16.9535 29.7251 16.9078C29.3224 16.8623 28.8934 16.8206 28.4373 16.7826C27.9817 16.7445 27.4955 16.7144 26.9793 16.6914C26.4622 16.6687 25.9384 16.6572 25.4066 16.6572C24.8753 16.6572 24.3166 16.6726 23.732 16.7028C23.1473 16.7327 22.5816 16.7865 22.0349 16.8623C21.989 16.7863 21.9321 16.6609 21.8638 16.4861C21.7956 16.3116 21.7458 16.1784 21.7163 16.0873C21.4273 15.4493 21.093 14.7276 20.7129 13.9227C21.7611 13.4971 22.7602 13.0074 23.7102 12.4528C24.6593 11.8981 25.4183 11.4048 25.9883 10.9719C26.5581 10.5385 27.0973 10.0789 27.6061 9.59295C28.1152 9.1069 28.4452 8.76906 28.5976 8.5791C28.7497 8.38883 28.8939 8.20287 29.0305 8.02082L29.0534 7.99784C31.2712 10.7019 32.4034 13.8159 32.4484 17.3405L32.2204 17.295Z' fill='%23EA4C89'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1928_1364'%3E%3Crect width='35' height='35' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

#shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
  width: 100%;
  padding: 2rem 0;
}
#shots .shot {
  position: relative;
  display: block;
  width: calc(100% + 0.5px);
  height: 0;
  margin: 0;
  padding-bottom: 90%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  transform: translateZ(0);
  align-self: stretch;
}
#shots .shot::before {
  z-index: 2;
  top: 0px;
  left: 0px;
  height: calc(100% - 1px);
  width: 100%;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  background-color: rgba(0, 0, 0, 0);
  content: "";
  position: absolute;
  pointer-events: none;
}
#shots .shot:hover::before {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
}
#shots .shot img {
  opacity: 1;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s ease;
  will-change: transform;
  object-fit: cover;
  object-position: center center;
  border-radius: 0px;
}
#shots .shot:hover img {
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.05);
}

#shots .shot::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
  height: 12%;
  max-height: 30px;
  min-height: 20px;
  width: 100%;
  top: 50%;
  left: 0%;
  background-image: var(--icon-dribbble);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: 0;
  transform: translateY(-50%) scale(0.75);
  will-change: transform;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#shots .shot:hover::after {
  opacity: 1;
  transform: translateY(-50%);
}