.twentyseventeen-panel .panel-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
will-change: background-position;
transition: background-position 0.15s linear; } .twentyseventeen-panel .panel-image img {
display: block;
max-width: none; will-change: transform;
backface-visibility: hidden;
} .twentyseventeen-panel {
position: relative; } .twentyseventeen-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; z-index: 1;  background-image: 
repeating-linear-gradient(
90deg,
rgba(34, 34, 34, 0.185) 0 1px,
transparent 1px 3px
);
background-repeat: repeat;
background-attachment: fixed; } .twentyseventeen-panel > * {
position: relative;
z-index: 2;
} .twentyseventeen-panel .panel-content {
padding-top: 10px;
padding-bottom: 10px;
} .panel-image {
position: relative;
overflow: hidden;
z-index: 1;
} .panel-image::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 3; background-image: 
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 3px
),
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 3px
);
background-size: auto, auto;
background-repeat: repeat, repeat;
background-position: left top, left top;
background-attachment: fixed, fixed;
} .panel-image::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0.05) 75%,
rgba(0,0,0,0.2) 90%,
rgba(0,0,0,0.8) 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0.05) 75%,
rgba(0,0,0,0.2) 90%,
rgba(0,0,0,0.8) 100%
);
} a {
box-shadow: none !important; }