/** Shopify CDN: Minification failed

Line 10:0 Unexpected "<"
Line 36:2 Unexpected "}"

**/


/* CSS from section stylesheet tags */
<style>
  .tetra-ad-banner {
    display: block;
    width: 100%;
  }
  .tetra-ad-banner img {
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
  @media (max-width: 767px) {
    .tetra-ad-banner--desktop {
      display: none;
    }

    .tetra-ad-banner img {
    width: 100%;
    height: auto;
    margin-top: 0px;
    }
  }
  @media (min-width: 768px) {
    .tetra-ad-banner--mobile {
      display: none;
    }
  }
  }
</style>
/* Add your custom CSS styles here */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.youtube-grid .youtube-grid-item {
  position: relative;
}

.youtube-grid .youtube-thumbnail {
    width: 100%;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.youtube-grid .youtube-grid-item {
  position: relative;
}

.youtube-grid .thumbnail-container {
  position: relative;
}

.youtube-grid .play-icon {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
  background-image: url('path/to/your/play-icon.png'); /* Replace 'path/to/your/play-icon.png' with the path to your play icon image */
  background-size: cover;
}

.youtube-grid .play-button svg {
    background: #dd6739;
    border-radius: 150px;
    padding: 10px;
    border: 2px solid black;
}

.thumbnail-container .video-title {
    font-size: 1.7rem;
    line-height: 1.2em;
    font-family: 'din-2014' !important;
    font-weight: 900;
}