@import url('https://evacadeau.nl/wp-content/uploads/zelf-fonts/eva-fonts.css');
/* ============================================================
   EvaCadeau V4 "Warm Boutique" — site-geneli reskin
   (Claude, 2026-07-09) — front-page .evh ile aynı tasarım dili.
   Palet: cream #FAF6F0 / sage #8E9E86 / terracotta #C98A6B / ink #3A362F
   NOT: checkout (body.woocommerce-checkout) BİLEREK atlanır —
   oradaki Fluid/Mollie markası Customizer CSS'inde ve korunuyor.
   ============================================================ */

:root {
  --theme-color: #8E9E86;        /* sage  (was demo pink)   */
  --theme-color2: #C98A6B;       /* terracotta (was purple) */
  --theme-color-light: rgba(142, 158, 134, .10);
  --theme-color-hover: #6E7E67;  /* sage-deep — cms-theme hover !important bunu kullanır */
  --theme-bg-light: #F3ECE1;
  --color-dark: #3A362F;         /* warm ink (was navy)     */
  --evx-cream: #FAF6F0;
  --evx-cream-2: #F3ECE1;
  --evx-cream-3: #EFE6D8;
  --evx-sage: #8E9E86;
  --evx-sage-deep: #6E7E67;
  --evx-sage-soft: #DCE3D6;
  --evx-terracotta: #C98A6B;
  --evx-terracotta-deep: #B26F4F;
  --evx-sand: #E7C9A9;
  --evx-ink: #3A362F;
  --evx-ink-soft: #6B655B;
  --evx-line: #E7DDCE;
  --evx-white: #FFFDFA;
  --evx-radius: 26px;
  --evx-shadow: 0 18px 50px -30px rgba(110, 126, 103, .55);
  --evx-shadow-soft: 0 10px 30px -22px rgba(110, 126, 103, .5);
}

/* ---------- basis ---------- */
body:not(.woocommerce-checkout) {
  background-color: var(--evx-cream);
  color: var(--evx-ink);
}
body:not(.woocommerce-checkout) p { color: var(--evx-ink-soft); }
body:not(.woocommerce-checkout) h1,
body:not(.woocommerce-checkout) h2,
body:not(.woocommerce-checkout) h3,
body:not(.woocommerce-checkout) h4,
body:not(.woocommerce-checkout) h5 { color: var(--evx-ink); }

/* ---------- knoppen (theme-btn overal) ---------- */
body:not(.woocommerce-checkout) .theme-btn {
  background: var(--evx-sage);
  color: var(--evx-white);
  border-radius: 100px;
  padding: 13px 28px;
  font-weight: 600;
  box-shadow: 0 14px 30px -18px var(--evx-sage-deep);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
body:not(.woocommerce-checkout) .theme-btn::before { content: none; }
body:not(.woocommerce-checkout) .theme-btn:hover {
  background: var(--evx-sage-deep);
  color: var(--evx-white);
  transform: translateY(-2px);
}
body:not(.woocommerce-checkout) .theme-btn2 {
  background: var(--evx-terracotta);
  box-shadow: 0 14px 30px -18px var(--evx-terracotta-deep);
}
body:not(.woocommerce-checkout) .theme-btn2:hover { background: var(--evx-terracotta-deep); }

/* WooCommerce knoppen (archief + product + cart) — checkout uitgesloten */
body:not(.woocommerce-checkout) .woocommerce a.button,
body:not(.woocommerce-checkout) .woocommerce button.button,
body:not(.woocommerce-checkout) .woocommerce input.button,
body:not(.woocommerce-checkout) .woocommerce .single_add_to_cart_button,
body:not(.woocommerce-checkout) .woocommerce a.add_to_cart_button,
body:not(.woocommerce-checkout) .woocommerce .checkout-button {
  background-color: var(--evx-sage) !important;
  color: var(--evx-white) !important;
  border-radius: 100px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: background .3s ease, transform .3s ease !important;
}
body:not(.woocommerce-checkout) .woocommerce a.button:hover,
body:not(.woocommerce-checkout) .woocommerce button.button:hover,
body:not(.woocommerce-checkout) .woocommerce input.button:hover,
body:not(.woocommerce-checkout) .woocommerce .single_add_to_cart_button:hover,
body:not(.woocommerce-checkout) .woocommerce a.add_to_cart_button:hover,
body:not(.woocommerce-checkout) .woocommerce .checkout-button:hover {
  background-color: var(--evx-sage-deep) !important;
  transform: translateY(-2px);
}

/* ---------- header / navbar ---------- */
body:not(.woocommerce-checkout) .header,
body:not(.woocommerce-checkout) .navbar {
  background: rgba(250, 246, 240, .92);
}
body:not(.woocommerce-checkout) .navbar.fixed-top {
  background: rgba(250, 246, 240, .95);
  box-shadow: 0 6px 24px -18px rgba(58, 54, 47, .4);
}
body:not(.woocommerce-checkout) .header-top { background: var(--evx-ink); }

/* ---------- breadcrumb band ---------- */
body:not(.woocommerce-checkout) .site-breadcrumb,
body:not(.woocommerce-checkout) .site-breadcrumb-bg {
  background: var(--evx-cream-2) !important;
  background-image: none !important;
}
body:not(.woocommerce-checkout) .site-breadcrumb::before { display: none; }
body:not(.woocommerce-checkout) .site-breadcrumb .breadcrumb-title { color: var(--evx-ink); }
body:not(.woocommerce-checkout) .site-breadcrumb .breadcrumb-menu li,
body:not(.woocommerce-checkout) .site-breadcrumb .breadcrumb-menu li a,
body:not(.woocommerce-checkout) .site-breadcrumb .breadcrumb-menu li::before { color: var(--evx-ink-soft); }
body:not(.woocommerce-checkout) .site-breadcrumb .breadcrumb-menu li.active { color: var(--evx-terracotta-deep); }

/* ---------- section headers ---------- */
body:not(.woocommerce-checkout) .site-title-tagline {
  color: var(--evx-terracotta-deep);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ---------- product cards (shop/categorie/related) ---------- */
body:not(.woocommerce-checkout) .product-item {
  border-radius: var(--evx-radius);
  overflow: hidden;
  background: var(--evx-white);
  border: 1px solid var(--evx-line);
  box-shadow: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
body:not(.woocommerce-checkout) .product-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--evx-shadow);
}
body:not(.woocommerce-checkout) .product-item .product-img,
body:not(.woocommerce-checkout) .product-item .product-image {
  background: var(--evx-cream-3);
}
body:not(.woocommerce-checkout) .product-item .type {
  border-radius: 100px;
  background: var(--evx-cream);
  color: var(--evx-sage-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}
body:not(.woocommerce-checkout) .product-item .type.new,
body:not(.woocommerce-checkout) .product-item .type.hot,
body:not(.woocommerce-checkout) .product-item .type.discount {
  background: var(--evx-terracotta);
  color: #fff;
}

/* prijzen */
body:not(.woocommerce-checkout) .woocommerce .price,
body:not(.woocommerce-checkout) .product-item .price,
body:not(.woocommerce-checkout) .woocommerce-Price-amount {
  color: var(--evx-ink);
}
body:not(.woocommerce-checkout) .woocommerce span.onsale {
  background: var(--evx-terracotta);
  border-radius: 100px;
}

/* ---------- formulieren ---------- */
body:not(.woocommerce-checkout) input[type=text]:not(.qty),
body:not(.woocommerce-checkout) input[type=email],
body:not(.woocommerce-checkout) input[type=search],
body:not(.woocommerce-checkout) textarea,
body:not(.woocommerce-checkout) select {
  border-radius: 16px;
  border-color: var(--evx-line);
}

/* ---------- paginatie ---------- */
body:not(.woocommerce-checkout) .pagination .page-link {
  border-radius: 50% !important;
  color: var(--evx-ink);
  border-color: var(--evx-line);
}
body:not(.woocommerce-checkout) .pagination .page-item.active .page-link,
body:not(.woocommerce-checkout) .pagination .page-link:hover {
  background: var(--evx-sage);
  border-color: var(--evx-sage);
  color: #fff;
}
body:not(.woocommerce-checkout) .woocommerce nav.woocommerce-pagination ul li a,
body:not(.woocommerce-checkout) .woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 50%;
}
body:not(.woocommerce-checkout) .woocommerce nav.woocommerce-pagination ul li span.current,
body:not(.woocommerce-checkout) .woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--evx-sage);
  color: #fff;
}

/* ---------- footer ---------- */
body:not(.woocommerce-checkout) .footer-area {
  background: var(--evx-ink) !important;
  background-image: none !important;
}
body:not(.woocommerce-checkout) .footer-widget-title { color: var(--evx-sand); }
body:not(.woocommerce-checkout) .footer-widget-title::before { background: var(--evx-terracotta); }
body:not(.woocommerce-checkout) .footer-area a:hover { color: var(--evx-sand); }
body:not(.woocommerce-checkout) .copyright-area {
  background: #2E2A24 !important;
}

/* ---------- winkelwagen: coupon-rij overflow fix ---------- */
body:not(.woocommerce-checkout) .shop-cart-summary ul li.cart-discount {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  overflow-wrap: anywhere;
}
body:not(.woocommerce-checkout) .shop-cart-summary { overflow: hidden; }

/* ---------- misc ---------- */
body:not(.woocommerce-checkout) #scroll-top,
body:not(.woocommerce-checkout) .scroll-top {
  background: var(--evx-sage);
  border-radius: 50%;
}
body:not(.woocommerce-checkout) a:hover { color: var(--evx-sage-deep); }
body:not(.woocommerce-checkout) ::selection { background: var(--evx-sage-soft); color: var(--evx-ink); }

/* ===================================================================
   V4 CILA / POLISH — 2026-07-10 (yalniz gorsel ince ayar)
   Kapsam: sepet ozeti hizalama + afrekenen pill + kupon alani +
   kupon-sil linki NL + footer metin okunurlugu + hero blob tasma.
   Checkout (woocommerce-checkout) BILEREK haric.
   =================================================================== */
body:not(.woocommerce-checkout) .shop-cart-summary { width: 100% !important; }
body:not(.woocommerce-checkout) .shop-cart-summary li { align-items: center !important; }
body:not(.woocommerce-checkout) .shop-cart-summary li strong { white-space: normal !important; }
body:not(.woocommerce-checkout) .shop-cart-summary .wc-proceed-to-checkout { width: 100%; }
body:not(.woocommerce-checkout) .shop-cart-summary .checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  height: auto !important;
  border-radius: 32px !important;
  padding: 16px 24px !important;
}
body:not(.woocommerce-checkout) .shop-cart-coupon .form-group { position: relative; }
body:not(.woocommerce-checkout) .shop-cart-coupon .form-group button.theme-btn {
  top: 50% !important;
  transform: translateY(-50%);
  bottom: auto !important;
}
@media (max-width: 640px) {
  body:not(.woocommerce-checkout) .shop-cart-coupon .form-group button.theme-btn {
    position: static !important;
    transform: none;
    width: 100%;
    margin-top: 10px;
    display: block;
  }
}
body:not(.woocommerce-checkout) .woocommerce-remove-coupon { font-size: 0 !important; text-decoration: none !important; }
body:not(.woocommerce-checkout) .woocommerce-remove-coupon::after {
  content: "Verwijderen";
  font-size: 13px;
  color: #B3564A;
  text-decoration: underline;
  margin-right: 6px;
}
footer .footer-widget-box.about-us p { color: rgba(240, 235, 226, 0.78) !important; }
.evh { overflow-x: clip; }


/* ===================================================================
   V4 TYPOGRAFIE — 2026-07-10 (Young Serif kopteksten + Epilogue tekst
   + Caveat handgeschreven accent). Checkout BILEREK haric.
   =================================================================== */
body:not(.woocommerce-checkout){
  font-family:"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:not(.woocommerce-checkout) h1,
body:not(.woocommerce-checkout) h2,
body:not(.woocommerce-checkout) h3,
body:not(.woocommerce-checkout) h4,
body:not(.woocommerce-checkout) h5,
body:not(.woocommerce-checkout) h6,
body:not(.woocommerce-checkout) .site-title,
body:not(.woocommerce-checkout) .breadcrumb-title,
body:not(.woocommerce-checkout) .section-title,
body:not(.woocommerce-checkout) .sec-title .title,
body:not(.woocommerce-checkout) .widget-title,
body:not(.woocommerce-checkout) .footer-widget-box .footer-widget-title,
body:not(.woocommerce-checkout) .product-title,
body:not(.woocommerce-checkout) .product-item .title,
body:not(.woocommerce-checkout) .product-item h3,
body:not(.woocommerce-checkout) .shop-cart-summary .summary-title,
body:not(.woocommerce-checkout) .eva-faq-q,
body:not(.woocommerce-checkout) .evh h1,
body:not(.woocommerce-checkout) .evh h2,
body:not(.woocommerce-checkout) .evh h3,
body:not(.woocommerce-checkout) .evh .serif,
body:not(.woocommerce-checkout) .evh .price,
body:not(.woocommerce-checkout) .evh .hero-badge b{
  font-family:"Young Serif",serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
/* Handgeschreven accent (terracotta) — alleen op bewuste plekken */
body:not(.woocommerce-checkout) .evh .mn-tag,
body:not(.woocommerce-checkout) .evh .geo-answer .q{
  font-family:"Caveat",cursive !important;
  font-style:normal !important;
  font-weight:600 !important;
  color:var(--evx-terra,#B3564A) !important;
  letter-spacing:.01em !important;
}
body:not(.woocommerce-checkout) .evh .mn-tag{ font-size:1.35rem !important; }
body:not(.woocommerce-checkout) .evh .geo-answer .q{ font-size:1.5rem !important; }

/* Hero italic-accent -> Caveat handgeschreven (zoals in social) */
body:not(.woocommerce-checkout) .evh h2.serif em,
body:not(.woocommerce-checkout) .evh h1 em,
body:not(.woocommerce-checkout) .evh .serif em{
  font-family:"Caveat",cursive !important;font-style:normal !important;font-weight:600 !important;
  color:var(--evx-terra,#B3564A) !important;letter-spacing:.01em !important;font-size:1.12em !important;
}

/* FIX 2026-07-10: el yazisi tutarliligi (tum .evh h2/h3 em) + foto-link cerceve doldurma */
body:not(.woocommerce-checkout) .evh h2 em,
body:not(.woocommerce-checkout) .evh h3 em{
  font-family:"Caveat",cursive !important;font-style:normal !important;font-weight:600 !important;
  color:var(--evx-terra,#B3564A) !important;letter-spacing:.01em !important;font-size:1.12em !important;
}
.evh .hero-visual .frame a,
.evh .mn-visual .frame a{ display:block;width:100%;height:100%; }


/* ===================================================================
   DESIGN-REVIEW FIXES — 2026-07-10 (alleen visueel/functioneel; checkout haric)
   Bron: evacadeau.nl design-review rapport (door Fatih goedgekeurde lijst).
   Items: 1 hamburger, 2A header-top mobiel, 2B ondoorzichtige sticky header,
   5 terracotta = primaire koopactie, 6 paginatie-contrast, 7 OOS-knop,
   8 PDP-galerij, 11 kaart-uitlijning, 16 OOS-badge, 17 related-kader,
   18 nieuwsbrief-checkbox. (3,4 = Fatih handmatig; 20 = chat-plugin, overgeslagen.)
   =================================================================== */

/* --- 2B: sticky header volledig ONDOORZICHTIG + z-index (geen doorbloeding) --- */
body:not(.woocommerce-checkout) .header,
body:not(.woocommerce-checkout) .navbar,
body:not(.woocommerce-checkout) .navbar.fixed-top {
  background: var(--evx-cream) !important;   /* was rgba .92 / .95 -> doorzichtig */
}
body:not(.woocommerce-checkout) .navbar.fixed-top {
  z-index: 1030;
  box-shadow: 0 6px 24px -18px rgba(58, 54, 47, .4);
}

/* --- 2A: donkere header-top verbergen op mobiel/tablet (lege zwarte strip) --- */
@media (max-width: 991.98px) {
  body:not(.woocommerce-checkout) .header-top { display: none !important; }
}

/* --- 1: hamburger-knop zichtbaar + aanraakbaar (>=44px), alleen < lg
       (op lg+ verbergt navbar-expand-lg de toggler zelf) --- */
@media (max-width: 991.98px) {
  body:not(.woocommerce-checkout) .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--evx-line);
    border-radius: 12px;
    background: var(--evx-white);
    color: var(--evx-ink);
    font-size: 20px;
    line-height: 1;
    box-shadow: none;
  }
}
body:not(.woocommerce-checkout) .navbar-toggler i { pointer-events: none; }
body:not(.woocommerce-checkout) .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--evx-sage-soft);
}

/* --- 10: hero "Met naam" badge — icoon i.p.v. emoji, terracotta --- */
body:not(.woocommerce-checkout) .evh .hero-badge .emoji {
  color: var(--evx-terracotta-deep);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
}

/* --- 5: terracotta = primaire koop/verzend-actie; salie = secundair --- */
body:not(.woocommerce-checkout) .woocommerce .single_add_to_cart_button,
body:not(.woocommerce-checkout) .shop-single-action-cart .single_add_to_cart_button,
body:not(.woocommerce-checkout) .woocommerce a.add_to_cart_button,
body:not(.woocommerce-checkout) .shop-cart-summary .checkout-button,
body:not(.woocommerce-checkout) .woocommerce .checkout-button,
body:not(.woocommerce-checkout) .woocommerce .wc-proceed-to-checkout a.button {
  background-color: var(--evx-terracotta) !important;
  color: var(--evx-white) !important;
}
body:not(.woocommerce-checkout) .woocommerce .single_add_to_cart_button:hover,
body:not(.woocommerce-checkout) .shop-single-action-cart .single_add_to_cart_button:hover,
body:not(.woocommerce-checkout) .woocommerce a.add_to_cart_button:hover,
body:not(.woocommerce-checkout) .shop-cart-summary .checkout-button:hover,
body:not(.woocommerce-checkout) .woocommerce .checkout-button:hover,
body:not(.woocommerce-checkout) .woocommerce .wc-proceed-to-checkout a.button:hover {
  background-color: var(--evx-terracotta-deep) !important;
}
/* grid quick-add is al terracotta: hover -> terracotta-deep (was salie) */
body:not(.woocommerce-checkout) .product-cart-btn { background: var(--evx-terracotta); }
body:not(.woocommerce-checkout) .product-cart-btn:hover { background: var(--evx-terracotta-deep); }
/* PDP verlanglijst + vergelijk -> secundair/outline (botsen niet meer met primair) */
body:not(.woocommerce-checkout) .shop-single-action-cart .theme-btn2 {
  background: transparent !important;
  color: var(--evx-terracotta-deep) !important;
  border: 1.5px solid var(--evx-line) !important;
  box-shadow: none !important;
}
body:not(.woocommerce-checkout) .shop-single-action-cart .theme-btn2:hover {
  background: var(--evx-cream-2) !important;
  color: var(--evx-terracotta-deep) !important;
}

/* --- 6: paginatie leesbaar (was donker-op-donker: tekst evx-ink op color-dark bg) --- */
body:not(.woocommerce-checkout) .pagination .page-link {
  background: var(--evx-white) !important;
  color: var(--evx-ink) !important;
  border: 1px solid var(--evx-line) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body:not(.woocommerce-checkout) .pagination .page-item.active .page-link,
body:not(.woocommerce-checkout) .pagination .page-link:hover {
  background: var(--evx-sage) !important;
  border-color: var(--evx-sage) !important;
  color: #fff !important;
}
body:not(.woocommerce-checkout) .pagination .page-item.disabled .page-link {
  background: var(--evx-cream-2) !important;
  color: var(--evx-ink-soft) !important;
  opacity: .6;
}

/* --- 16: "Niet op voorraad"-badge leesbaar (contrast >= 4.5:1) --- */
body:not(.woocommerce-checkout) .product-item .type.oos {
  background: var(--evx-cream-3) !important;
  color: var(--evx-ink) !important;
  border: 1px solid var(--evx-line);
}

/* --- 7: OOS-kaart -> koopknop gedempt/passief (niet klikbaar) --- */
body:not(.woocommerce-checkout) .product-item.is-oos .product-cart-btn {
  background: var(--evx-cream-3) !important;
  color: var(--evx-ink-soft) !important;
  box-shadow: none !important;
  pointer-events: none;
  opacity: .75;
}

/* --- 11: kaarten gelijke hoogte, prijs + knop op één basislijn ---
   Alleen in RASTER-weergave: .item-list (lijstweergave) uitgesloten zodat
   die z'n rij-layout (flex-direction:row) behoudt. --- */
body:not(.woocommerce-checkout) .shop-item-wrap .row:not(.item-list) .product-item,
body:not(.woocommerce-checkout) .related-item .product-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body:not(.woocommerce-checkout) .shop-item-wrap .row:not(.item-list) .product-item .product-content,
body:not(.woocommerce-checkout) .related-item .product-item .product-content {
  margin-top: auto;
}
body:not(.woocommerce-checkout) .shop-item-wrap .row:not(.item-list) .product-item .product-title,
body:not(.woocommerce-checkout) .related-item .product-item .product-title {
  min-height: 2.6em;
}

/* --- 17: related-kaarten enkel kader + grotere foto (was dubbel kader) --- */
body:not(.woocommerce-checkout) .related-item .product-item {
  padding: 0 !important;
  border: 1px solid var(--evx-line) !important;
}
body:not(.woocommerce-checkout) .related-item .product-img { padding: 12px !important; }

/* --- 8: PDP-hoofdfoto vult kader (was padding:30px / width:91% -> klein) --- */
body:not(.woocommerce-checkout) .shop-single-gallery .flex-viewport img {
  padding: 10px !important;
  width: 100% !important;
}
@media (max-width: 767.98px) {
  body:not(.woocommerce-checkout) .shop-single-gallery .flex-viewport img { padding: 6px !important; }
  body:not(.woocommerce-checkout) .shop-single-info { margin-left: 0 !important; }
}

/* --- 18: nieuwsbrief consent-checkbox groter + 44px raakvlak (label is al klikbaar) --- */
body:not(.woocommerce-checkout) .evh .nl-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
body:not(.woocommerce-checkout) .evh .nl-consent input[type=checkbox] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: var(--evx-terracotta-deep);
  cursor: pointer;
}

/* ============================================================
   SORUN 2 (22-07-2026, terminal) — productkaart-foto vult het kader
   object-fit: cover ipv witruimte (contain). Alleen GRID + related
   (niet lijstweergave, niet de homepage .evh). Reversibel: dit blok weg.
   ⚠️ Naam-kralen: vierkant + object-position center; live checken dat
   namen (ZOEY/ELEANORE/YUNA) niet worden afgesneden — zo niet, ratio bijstellen.
   ============================================================ */
body:not(.woocommerce-checkout) .shop-item-wrap .row:not(.item-list) .product-item .product-img,
body:not(.woocommerce-checkout) .related-item .product-item .product-img {
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
}
body:not(.woocommerce-checkout) .shop-item-wrap .row:not(.item-list) .product-item .product-img img,
body:not(.woocommerce-checkout) .related-item .product-item .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}