/* Eine paas-medien.de Produktion */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/font/worksans_regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/font/worksans_bold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background: radial-gradient(circle at center, #2f5a75, #204157);
    color: #e8e8e8;
    font-family: 'Work Sans', sans-serif;
}

.element {
    width: calc(50% - 40px);
    aspect-ratio: 1142/969;
    perspective: 1000px;
    max-width: 300px;
    min-width: 160px;
}

.element.clone {
    width: calc(50% - 80px);
}

.element-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.element-front,
.element-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
}

.element-back {
    transform: rotateY(180deg);
}

.placeholder {
    height: 240px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.shareButton, .downloadButton {
    display: none;
}

.icon {
    max-width: 200px;
}

.container>.element {
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.5s;
}

.container>.element:hover,
.container>.element:focus {
    transform: scale(1.01);
}

.closeOverlay,
.downloadButton,
.shareButton,
.copyText,
.whatsappShare,
.threadsShare,
.twitterShare {
    transform: scale(1);
    transition: transform 0.5s;
    cursor: pointer;
}

.downloadButton,
.shareButton,
.copyText,
.whatsappShare,
.threadsShare,
.twitterShare {
    width: 60px;
}

.closeOverlay:hover,
.downloadButton:hover,
.shareButton:hover,
.copyText:hover,
.whatsappShare:hover,
.threadsShare:hover,
.twitterShare:hover {
    transform: scale(1.1);
}