/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.embed-youtube-playlists-wrapper {
	display: flex;
	gap: 2rem;
}

.embed-youtube-playlists-wrapper .category-list {
	min-width: 250px;
}

.embed-youtube-playlists-wrapper #youtube-embed .videos {
	display: grid;

	/* 2 column grid */
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-row-gap: 4rem;
	grid-column-gap: 2rem;
}

/* First video full width */
.embed-youtube-playlists-wrapper #youtube-embed .videos > .video {
	grid-area: 1 / 1 / 3 / 3;
}
.embed-youtube-playlists-wrapper #youtube-embed .videos .video ~ .video {
	grid-area: auto;
}


.embed-youtube-playlists-wrapper #youtube-embed .videos .video .video-title {
	font-size: 0.85rem;
	line-height: 1.2;
}

.embed-youtube-playlists-wrapper #youtube-embed .videos iframe {
  min-width: 100%; 
  min-height: 100%;
  width: auto;
  height: auto;
}


/* Default styles for the category list */

.embed-youtube-playlists-wrapper .video-filter-heading {
	color: var(--heading-light, #36537F);
	font-weight: 600;
	margin: 1.25rem 0rem 1.5rem 0rem;
}

.embed-youtube-playlists-wrapper .video-category-heading {
	margin: 0 0 1.5rem 0;
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-list li:before {
	content: '» ';
	color: var(--heading-light, #36537F);
}

.category-list li a {
	color: var(--text-dark, #36312B);
}

/* Media query for mobile breakpoint */
@media screen and (max-width: 767px) {

	.embed-youtube-playlists-wrapper {
		flex-direction: column;
	}

	.embed-youtube-playlists-wrapper .video-filter-heading {
		margin: 0.5rem 0rem;
	}

  
}

/* Media query for screens up to 600px */
@media (max-width: 600px) {
  .embed-youtube-playlists-wrapper #youtube-embed .videos {
    display: flex; /* Change to block layout */
    flex-direction: column;
  }

  .embed-youtube-playlists-wrapper #youtube-embed .videos .video {
    height: 315px;
  }
}