/* CSS Document */
/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("./fonts/inter-v12-latin-300.woff2") format("woff2"), url("./fonts/inter-v12-latin-300.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("./fonts/inter-v12-latin-500.woff2") format("woff2"), url("./fonts/inter-v12-latin-500.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("./fonts/inter-v12-latin-700.woff2") format("woff2"), url("./fonts/inter-v12-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
.hero {
  background: pink;
  opacity: .5; }

.video-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  width: 100%; }

.video-item {
  position: relative;
  width: 100%;
  min-width: 0; }

.video-item iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0; }