.card-logotype {
  margin-bottom: clamp(16px, 5.555vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .card-logotype {
    margin-bottom: 40px;
  }
}

.card-logotype__src {
  width: clamp(280px, 93.3333333333vw, 653.3333333333px);
  max-height: 228px;
  aspect-ratio: 336/228;
}
@media (min-width: 700px) {
  .card-logotype__src {
    width: clamp(663.5416666667px, 94.7916666667vw, 1137.5px);
    max-height: 494px;
    aspect-ratio: 728/494;
  }
}
@container (width > 920px) {
  .card-logotype__src {
    width: clamp(451px, 46.52vw, 670px);
    max-width: 670px;
    max-height: 455px;
    aspect-ratio: 670/455;
  }
}

.card-logotype__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: filter 0.3s ease;
}
@media (min-width: 971px) {
  .card-logotype__image {
    filter: grayscale(100%);
  }
}

.card-logotype:hover .card-logotype__image {
  filter: grayscale(0%);
  transition: filter 0.3s ease;
}

.card-logotype__title {
  max-width: 336px;
  margin: 0 auto 12px;
  text-align: center;
}
@media (min-width: 700px) {
  .card-logotype__title {
    max-width: 360px;
  }
}