.ytpp-main {
--ytpp-gap: 0.75rem;
--ytpp-radius: 6px;
--ytpp-accent: #f00;
display: grid;
gap: var(--ytpp-gap);
margin-block: 1rem;
&.ytpp-layout-side {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
.ytpp-list {
grid-template-columns: 1fr;
align-content: start; block-size: 0;
min-block-size: 100%;
overflow-y: auto;
}
}
@media (width < 640px) {
&.ytpp-layout-side {
grid-template-columns: 1fr;
.ytpp-list {
block-size: auto;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
}
}
.ytpp-stage {
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--ytpp-radius);
overflow: hidden;
iframe {
display: block;
inline-size: 100%;
block-size: 100%;
border: 0;
}
}
.ytpp-facade {
all: unset;
position: relative;
display: block;
inline-size: 100%;
block-size: 100%;
cursor: pointer;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ytpp-play {
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: 68px;
aspect-ratio: 68 / 48;
border-radius: 14px;
background: rgb(0 0 0 / 0.75);
transition: background-color 0.15s;
&::after {
content: "";
position: absolute;
inset: 50% auto auto 54%;
translate: -50% -50%;
border-block: 10px solid transparent;
border-inline-start: 17px solid #fff;
}
}
&:is(:hover, :focus-visible) .ytpp-play {
background: var(--ytpp-accent);
}
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: -3px;
}
}
.ytpp-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--ytpp-gap);
margin: 0;
padding: 0;
list-style: none;
.ytpp-layout-grid & {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
.ytpp-item {
all: unset;
display: grid;
gap: 0.375rem;
inline-size: 100%;
cursor: pointer;
img {
inline-size: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--ytpp-radius);
opacity: 0.8;
transition: opacity 0.15s;
}
&:is(:hover, :focus-visible, [aria-current]) img {
opacity: 1;
}
&[aria-current] img {
box-shadow: 0 0 0 3px var(--ytpp-accent);
}
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: 3px;
border-radius: var(--ytpp-radius);
}
}
.ytpp-item-title {
font-size: 0.875em;
line-height: 1.3;
}
.ytpp-notice {
margin: 0;
font-size: 0.8125em;
opacity: 0.8;
}
.ytpp-dialog {
inline-size: min(960px, 92vw);
padding: 0;
border: 0;
background: transparent;
overflow: visible;
&::backdrop {
background: rgb(0 0 0 / 0.85);
}
}
.ytpp-dialog-close {
position: absolute;
inset: -3rem 0 auto auto;
inline-size: 2.5rem;
aspect-ratio: 1;
border: 0;
border-radius: 50%;
background: #fff;
color: #000;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.ytpp-main * {
transition: none !important;
}
}.pgc-sgb-cb{position:relative;min-height:240px}.pgc-sgb-cb img{pointer-events:none}.sgb-preloader{position:absolute;width:38px;height:38px;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.sgb-preloader .sgb-square{width:15px;height:15px;margin:2px;float:left;opacity:0;background:#d3d3d3;animation:sgb-focusfade 2.8s infinite}.sgb-preloader .sgb-square:nth-child(1){animation-delay:.7s}.sgb-preloader .sgb-square:nth-child(2){animation-delay:1.4s}.sgb-preloader .sgb-square:nth-child(3){animation-delay:2.8s}.sgb-preloader .sgb-square:nth-child(4){animation-delay:2.1s}@keyframes sgb-focusfade{0%{opacity:0}30%{opacity:0}60%{opacity:1}75%{opacity:1}}.no-js .sgb-preloader{display:none}.simply-gallery-amp,simpLy-gallery-freedom-block{position:relative}.simply-gallery-amp *,.simpLy-gallery-freedom-block *{box-sizing:border-box}.simply-gallery-amp .sgb-gallery,.simpLy-gallery-freedom-block .sgb-gallery{position:relative}.simply-gallery-amp .sgb-gallery .sgb-item,.simpLy-gallery-freedom-block .sgb-gallery .sgb-item{max-width:250px;margin:1em auto}.sgb-gallery .sgb-item figure{margin:0;height:100%;display:flex;flex-direction:column}.sgb-gallery .sgb-item-caption{background:#eaeaea;color:#000;font-size:.8em;padding:.5em .5em 1em;margin:0;text-align:center}.sgb-gallery .sgb-item img,.sgb-gallery .sgb-item video{height:100%;width:100%;flex:1;object-fit:cover;display:block}.sgb-gallery .sgb-item audio,.sgb-gallery .sgb-item video{outline:0}.sgb-gallery .sgb-item audio{width:100%}.sgb-gallery .sgb-item a{height:100%;flex:1;object-fit:cover}