.image{display:block;overflow:hidden;position:relative;width:100%}.image img,.image picture{display:block;width:100%}.image>figure{margin:0;position:relative}.image__caption{border-bottom:1px solid #331e38;padding:1rem 0}.image__play-icon{background-image:url('data:image/svg+xml;utf8,<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.9" filter="url(%23filter0_b_2717_101833)"> <path d="M88 44C88 68.3005 68.3005 88 44 88C19.6995 88 0 68.3005 0 44C0 19.6995 19.6995 0 44 0C68.3005 0 88 19.6995 88 44Z" fill="white"/> </g> <path d="M27.5 27.9521V42.7503H30.25V31.9542L54.9725 43.9137L30.25 55.8732V45.0771C28.7375 45.0771 27.5 46.1241 27.5 47.4038V59.8752L60.5275 43.9137L27.5 27.9521Z" fill="%23FF455D"/> <defs> <filter id="filter0_b_2717_101833" x="-6" y="-6" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/> <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2717_101833"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2717_101833" result="shape"/> </filter> </defs> </svg>');background-position:center center;background-size:contain;border-radius:11.75rem;display:inline-block;height:5.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:5.5rem;z-index:2}.image__container{display:block;position:relative}.image__container:hover .image__play-icon{background-image:url('data:image/svg+xml;utf8,<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.9" filter="url(%23filter0_b_2717_101833)"> <path d="M88 44C88 68.3005 68.3005 88 44 88C19.6995 88 0 68.3005 0 44C0 19.6995 19.6995 0 44 0C68.3005 0 88 19.6995 88 44Z" fill="white"/> </g> <path d="M27.5 27.9521V42.7503H30.25V31.9542L54.9725 43.9137L30.25 55.8732V45.0771C28.7375 45.0771 27.5 46.1241 27.5 47.4038V59.8752L60.5275 43.9137L27.5 27.9521Z" fill="%23331E38"/> <defs> <filter id="filter0_b_2717_101833" x="-6" y="-6" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/> <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2717_101833"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2717_101833" result="shape"/> </filter> </defs> </svg>')}.image__container:focus-visible .image__play-icon{background-image:url('data:image/svg+xml;utf8,<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.9" filter="url(%23filter0_b_2717_101833)"> <path d="M88 44C88 68.3005 68.3005 88 44 88C19.6995 88 0 68.3005 0 44C0 19.6995 19.6995 0 44 0C68.3005 0 88 19.6995 88 44Z" fill="white"/> </g> <path d="M27.5 27.9521V42.7503H30.25V31.9542L54.9725 43.9137L30.25 55.8732V45.0771C28.7375 45.0771 27.5 46.1241 27.5 47.4038V59.8752L60.5275 43.9137L27.5 27.9521Z" fill="%23331E38"/> <defs> <filter id="filter0_b_2717_101833" x="-6" y="-6" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/> <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2717_101833"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2717_101833" result="shape"/> </filter> </defs> </svg>');outline:0.1875rem solid #331e38;outline-offset:-0.0625rem}