#cc-cookie-message .cc-cookie-wrapper.cc-has-graphic {
display: grid;
width: 100%;
box-sizing: border-box;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "graphic" "content";
gap: var(--cc-graphic-gap);
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="below"] {
grid-template-areas: "content" "graphic";
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="left"] {
grid-template-columns: minmax(0, min(35%, calc(var(--cc-graphic-width) + var(--cc-graphic-padding-left) + var(--cc-graphic-padding-right)))) minmax(0, 1fr);
grid-template-areas: "graphic content";
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="right"] {
grid-template-columns: minmax(0, 1fr) minmax(0, min(35%, calc(var(--cc-graphic-width) + var(--cc-graphic-padding-left) + var(--cc-graphic-padding-right))));
grid-template-areas: "content graphic";
}
#cc-cookie-message .cc-has-graphic > .cc-cookie-row {
grid-area: content;
width: 100%;
min-width: 0;
}
#cc-cookie-message .cc-banner-graphic-area {
grid-area: graphic;
display: flex;
justify-content: var(--cc-graphic-align-x);
align-self: var(--cc-graphic-align-y);
width: 100%;
min-width: 0;
padding: var(--cc-graphic-padding-top) min(var(--cc-graphic-padding-right), 25%) var(--cc-graphic-padding-bottom) min(var(--cc-graphic-padding-left), 25%);
box-sizing: border-box;
pointer-events: none;
}
#cc-cookie-message .cc-banner-graphic-image {
display: block;
flex: 0 1 auto;
width: var(--cc-graphic-width);
max-width: 100%;
height: var(--cc-graphic-height);
margin: 0;
padding: 0;
border: 0;
object-fit: contain;
object-position: var(--cc-graphic-object-position);
opacity: var(--cc-graphic-opacity);
}
#cc-cookie-message [data-cc-graphic-fit="cover"] .cc-banner-graphic-image {
object-fit: cover;
}
#cc-cookie-message [data-cc-graphic-fit="auto"] .cc-banner-graphic-image {
height: auto;
}
@media screen and (max-width: 768px) {
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="left"],
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="right"] {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "graphic" "content";
}
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="background"] {
display: block;
isolation: isolate;
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="background"][data-cc-graphic-layout="center"] {
position: relative;
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="background"] > .cc-cookie-row {
position: relative;
z-index: 1;
}
#cc-cookie-message .cc-has-graphic[data-cc-graphic-placement="background"] > .cc-banner-graphic-area {
position: absolute;
grid-area: auto;
top: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
border-radius: inherit;
align-items: var(--cc-graphic-align-y);
}
#cc-cookie-message [data-cc-graphic-placement="background"] .cc-banner-graphic-image {
max-height: 100%;
}
#cc-cookie-message [data-cc-graphic-placement="background"][data-cc-graphic-background-size="cover"] .cc-banner-graphic-image,
#cc-cookie-message [data-cc-graphic-placement="background"][data-cc-graphic-background-size="contain"] .cc-banner-graphic-image {
width: 100%;
height: 100%;
}
#cc-cookie-message [data-cc-graphic-placement="background"][data-cc-graphic-background-size="cover"] .cc-banner-graphic-image {
object-fit: cover;
}
#cc-cookie-message [data-cc-graphic-placement="background"][data-cc-graphic-background-size="contain"] .cc-banner-graphic-image {
object-fit: contain;
}