@use "sass:math";
/* media query mixin */
/* get rid of list formatting */
/* prevent long links from breaking out of container */
/* creates a colored circle with an icon in the middle */
/* formats the placeholder text within an input field */
.youtube-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; }

.youtube-video__play {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .youtube-video__play svg {
    width: 6.875rem;
    height: 6.875rem;
    background: white;
    border-radius: 6.25rem;
    fill: #000; }
    @media (max-width: 47.9375rem) {
      .youtube-video__play svg {
        width: 3.75rem;
        height: 3.75rem; } }

.youtube-modal__video {
  height: 0;
  padding-top: 56.25%;
  position: relative; }
  .youtube-modal__video iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }

.youtube-video-3col .youtube-video__play svg {
  width: 3.75rem;
  height: 3.75rem; }
  @media (max-width: 47.9375rem) {
    .youtube-video-3col .youtube-video__play svg {
      width: 3.125rem;
      height: 3.125rem; } }
  @media (max-width: 35.9375rem) {
    .youtube-video-3col .youtube-video__play svg {
      width: 4.375rem;
      height: 4.375rem; } }
  @media (max-width: 23.6875rem) {
    .youtube-video-3col .youtube-video__play svg {
      width: 2.5rem;
      height: 2.5rem; } }

/*# sourceMappingURL=youtube-video.css.map */