.section.video {text-align: center; } .section.video > .container {padding-top: 5.4375rem;padding-bottom: 4.5rem; } .section.video > .container h1, .section.video > .container .h1, .section.video > .container h2, .section.video > .container .h2 {position: relative;text-align: center;align-items: center;font-size: 2.5rem;line-height: 1;margin-bottom: 4.5625rem;color: var(--black); } .section.video > .container .player {margin-top: 1.4375rem;max-width: 80.75rem;margin-left: auto;margin-right: auto;aspect-ratio: 865/418;position: relative;display: flex;align-items: center;justify-content: center;margin-bottom: 1.9375rem;max-width: 865px; } .section.video > .container .player::before {content: " ";position: absolute;width: 4.375rem;height: 4.375rem;left: -1.25rem;bottom: -1.25rem;border-left: solid 2px var(--primary);border-bottom: solid 2px var(--primary); } .section.video > .container .player::after {content: " ";position: absolute;width: 4.375rem;height: 4.375rem;right: -1.25rem;top: -1.25rem;border-right: solid 2px var(--primary);border-top: solid 2px var(--primary); } .section.video > .container .player .video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; } .section.video > .container .player .btn {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;box-shadow: none !important;color: var(--primary); } .section.video > .container .player .btn span {border-radius: 12.5rem;width: 6.25rem;height: 6.25rem;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.58);backdrop-filter: blur(10px);border: 0; } .section.video > .container .player .btn span svg {margin: 0;width: 3rem;height: auto;position: relative; } .section.video > .container .player .btn span.active {display: none; } .section.video > .container .player .btn span.active svg {top: 0.0625rem; } .section.video > .container .player .btn span.inactive {display: flex; } .section.video > .container .player .btn span.inactive svg {left: 0.375rem;top: 0.0625rem; } .section.video > .container .player.active .btn {opacity: 0;transition: opacity 0.25s; } .section.video > .container .player.active .btn span.active {display: flex; } .section.video > .container .player.active .btn span.inactive {display: none; } .section.video > .container .player.active:hover .btn {opacity: 1; }