.textmedia--1 .component__content {
  display: grid;
  grid-template-columns: subgrid;
  gap: 1.875rem;
  align-items: flex-end;
}

.textmedia--1 .heading--primary {
  color: var(--clr-white);
}

.textmedia--1 .textmedia__text {
  color: rgba(144, 142, 147, 1);
}

.textmedia--1 .textmedia__media {
  padding: 1.25rem;
  background: linear-gradient(111.75deg, #b19d60 0%, #87764d 70%);
  border-radius: 0.625rem;
}

.textmedia--1 .textmedia__video {
  position: relative;
}

/*
.textmedia--1 .textmedia__video video {
  aspect-ratio: 910 / 560;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.625rem;
}
*/

.textmedia--1 .button-play,
.textmedia--1 .button-mute {
  position: absolute;
  margin: unset;
  padding: unset;
  border: unset;
  cursor: pointer;
  background-color: transparent;
}

.textmedia--1 .button-play {
  --_button-size: 55px;
  top: 50%;
  left: 50%;
  margin-top: calc(0px - (var(--_button-size) / 2));
  margin-left: calc(0px - (var(--_button-size) / 2));
  width: var(--_button-size);
  height: var(--_button-size);
}

.textmedia--1 .button-mute {
  --_button-size: 47px;
  right: 1.25rem;
  bottom: 1.25rem;
  width: var(--_button-size);
  height: var(--_button-size);
}

.textmedia--1 .button-play::before,
.textmedia--1 .button-mute::before {
  content: '';
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.textmedia--1 .button-play::before {
  width: var(--_button-size);
  height: var(--_button-size);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iODciIHZpZXdCb3g9IjAgMCA3NSA4NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNNzMgNDAuMDM1OUM3NS42NjY3IDQxLjU3NTUgNzUuNjY2NyA0NS40MjQ1IDczIDQ2Ljk2NDFMNi4yNSA4NS41MDIyQzMuNTgzMzQgODcuMDQxOCAwLjI1MDAwNCA4NS4xMTczIDAuMjUwMDA0IDgyLjAzODFMMC4yNTAwMDcgNC45NjE4N0MwLjI1MDAwNyAxLjg4MjY3IDMuNTgzMzQgLTAuMDQxODMzNCA2LjI1MDAxIDEuNDk3NzdMNzMgNDAuMDM1OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
}

.textmedia--1 .button-play.active::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNjYiIHZpZXdCb3g9IjAgMCA0NCA2NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgb3BhY2l0eT0iMC44IiB3aWR0aD0iMTQiIGhlaWdodD0iNjYiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCBvcGFjaXR5PSIwLjgiIHg9IjMwIiB3aWR0aD0iMTQiIGhlaWdodD0iNjYiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
}

.textmedia--1 .button-mute::before {
  width: var(--_button-size);
  height: var(--_button-size);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCA1MSAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjQ3IDMxLjkzODhMMTEgMjMuNjY4VjcuNjc2NUwyNi41MzA3IDEuMDM4NTNDMjcuMjgzNiAwLjgwNzc5NCAyOCAxLjY0MTk4IDI4IDIuNzc3ODlWMzAuMjE3MkMyOCAzMS4zODg2IDI3LjI0NzEgMzIuMjQwNSAyNi40NyAzMS45Mzg4WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuMjM2MDggNy42MTU0OEgxMC43OTk2VjIzLjcwNDNINy4yMzYwOEM0LjI3ODQgMjMuNzA0MyAxLjg5MDg3IDIxLjMwODkgMS44OTA4NyAxOC4zNDE0VjEyLjk3ODRDMS44OTA4NyAxMC4wMTA5IDQuMjc4NCA3LjYxNTQ4IDcuMjM2MDggNy42MTU0OFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zNi4wODQ3IDhDNDAuNTIxMiAxMi40NTEyIDQwLjUyMTIgMTkuNjU1NSAzNi4wODQ3IDI0LjEwNjciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik00NC4xMjAyIDRDNTAuNzY2MSAxMC42Njc5IDUwLjc2NjEgMjEuNDgzMiA0NC4xMjAyIDI4LjE1MTEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
}

.textmedia--1 .button-mute.active::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCAzMyA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjQ3IDM4LjkzODhMMTEgMzAuNjY4VjE0LjY3NjVMMjYuNTMwNyA4LjAzODUzQzI3LjI4MzYgNy44MDc3OSAyOCA4LjY0MTk4IDI4IDkuNzc3ODlWMzcuMjE3MkMyOCAzOC4zODg2IDI3LjI0NzEgMzkuMjQwNSAyNi40NyAzOC45Mzg4WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuMjM2MDggMTQuNjE1NUgxMC43OTk2VjMwLjcwNDNINy4yMzYwOEM0LjI3ODQgMzAuNzA0MyAxLjg5MDg3IDI4LjMwODkgMS44OTA4NyAyNS4zNDE0VjE5Ljk3ODRDMS44OTA4NyAxNy4wMTA5IDQuMjc4NCAxNC42MTU1IDcuMjM2MDggMTQuNjE1NVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxsaW5lIHgxPSIzLjcwMTEzIiB5MT0iNDQuNjE3NyIgeDI9IjMxLjYxNzciIHkyPSIxLjI5ODg3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K');
}

.textmedia--1 .textmedia__video .button-play.active {
  opacity: 0;
  visibility: hidden;
  transition: opacity 880ms ease, visibility 800ms ease;
}

.textmedia--1 .textmedia__video:hover .button-play.active {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1200px) {
  .textmedia--1 .textmedia__media {
    grid-column: 1 / 9;
  }
  .textmedia--1 .textmedia__text {
    grid-column: 9 / 13;
  }
  .textmedia--1 .button-play {
    --_button-size: 105px;
  }
}