@font-face {
  font-family: "ITCGaramondStd";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/ITCGaramondStd-LtCond.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "ITCGaramondStd";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/ITCGaramondStd-BkCond.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Birds-of-Paradise";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/birds_of_paradise__commercial_version-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Birds-of-Paradise";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/birds_of_paradise__commercial_version-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Post-Grotesk";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/PostGrotesk-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "dlig" on;
}

@font-face {
  font-family: "Post-Grotesk";
  src: url("https://easel.hearstapps.com/assets-sex-after-60-issue/PostGrotesk-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "dlig" on;
}

/* Start Cosmo.com overrides */
nav.nav {
  display: none !important;
}

footer.footer {
  margin-top: 0 !important;
  padding-bottom: 120px !important;
}

footer.footer-inner {
  padding-bottom: 100px !important;
}

.sidepanel-new-item.has-children>a,
.sidepanel-new-item.has-children .sidepanel-new-submenu a,
.nav-sidepanel-button.new-nav .sidepanel-close-button,
.sidepanel-item.sidepanel-legal-ads-free a,
.sidepanel-location-choice-menu .sidepanel-legal-ads-free a,
.sidepanel-location-choice-submenu .sidepanel-legal-ads-free a,
.new-sidepanel-menu .sidepanel-legal-ads-free a,
.new-sidepanel-submenu .sidepanel-legal-ads-free a,
.footer-menu-item a,
.footer-network-tagline,
.footer-affiliate-disclosure,
.footer-copyright,
.footer-brand-director,
.footer-legal-menu-item a,
.footer-network-tagline a,
.footer-affiliate-disclosure a,
.footer-copyright a,
.footer-brand-director a,
.new-sidepanel-menu-recipe-box a,
.new-sidepanel-menu-parent-item a,
.new-sidepanel-menu-parent-item.has-children a,
.new-sidepanel-menu-parent-item.has-children div a,
.new-sidepanel-submenu-item,
body,
.nav-button.location-choice .location-choice-country,
.location-right-side-panel .sidepanel-header,
.location-right-side-panel .location-choice-sidepanel-menu a {
  font-family: unset;
}

/* End Cosmo.com overrides */
/* Start Meyer Reset */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* End Meyer Reset */

/* Adding Antialiasing */

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Adding Box Sizing */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.story-page__body sup {
  display: inline;
  vertical-align: baseline;
  margin-right: -0.1em;
  margin-left: -0.1em;
  font-feature-settings: "sups";
}

.subhead-1 sup {
  font-size: 17px;
  line-height: 17px;
  vertical-align: super;
  margin-right: 0.3em;
}

.story-page__body sup a {
  text-decoration: none;
}

.story-page__body ol {
  padding: 0;
  list-style-position: inside;
}

.story-page__body ol li {
  padding-bottom: var(--content-spacer--small);
  text-transform: initial;
}

/* CSS Variables */
:root {
  /* COLORS */
  --color-midnight: #1a0503;
  --color-eggplant: #660c16;
  --color-red: #f83406;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-green: #42ff00;

  /* TYPOGRAPHY */
  --font-family-serif: "ITCGaramondStd", serif;
  --font-family-sans-serif: "Post-Grotesk", sans-serif;
  --font-family-accent: "Birds-of-Paradise", cursive;
  --font-size-h1: clamp(52px, 9vw, 120px);
  --font-size-h2: clamp(36px, 9vw, 52px);
  --font-size-h3: clamp(22px, 6.5vw, 36px);
  --font-size-h4: 22px;
  --font-size-subhead-1: 28px;
  --font-size-subhead-2: 18px;
  --font-size-subhead-3: 16px;
  --font-size-subhead-4: 16px;
  --font-size-detail-1: clamp(10px, 7vw, 14px);
  --font-size-detail-2: clamp(10px, 7vw, 14px);
  --font-size-detail-3: 10px;
  --font-size-detail-4: 10px;
  --font-size-body-1: 18px;
  --font-size-body-2: 16px;
  --font-size-quote-1: clamp(36px, 9vw, 100px);
  --font-size-quote-2: clamp(36px, 5vw, 64px);
  --font-size-quote-3: clamp(36px, 7vw, 150px);
  --line-height-75: 75%;
  --line-height-80: 80%;
  --line-height-110: 110%;
  --line-height-130: 130%;
  --line-height-150: 150%;

  --border-radius: 20px;
  --content-spacer--small: 35px;
  --content-spacer--large: 72px;

  --max-page-width-narrow: 696px;
}

/* Global Styles */
body {
  font-family: var(--font-family-sans-serif);
  font-feature-settings: "dlig" on;
}

img {
  max-width: 100%;
}

.page-width-wide {
  padding: 0 20px;
  width: 100%;
}

.page-width-narrow {
  max-width: var(--max-page-width-narrow);
  width: 100%;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}

.page-width-narrow-credits {
  color: #fff;
  padding-top: var(--content-spacer--small);
  padding-bottom: var(--content-spacer--small);
}

.page-width-narrow-credits p+p {
  margin-top: 1em;
}

.page-width-narrow-credits .subhead-3 {
  text-transform: initial;
}

strong,
b {
  font-weight: 700;
}

h1,
.h1 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-h1);
  font-weight: 100;
  line-height: 90%;
  text-transform: uppercase;
  letter-spacing: -0.045em;
}

h2,
.h2 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-h2);
  font-weight: 100;
  line-height: 90%;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

h3,
.h3 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-h3);
  font-weight: 100;
  line-height: var(--line-height-110);
  letter-spacing: -0.01em;
}

h4,
.h4 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-h4);
  font-weight: 100;
  line-height: var(--line-height-110);
  letter-spacing: -0.01em;
}

h4 i,
.h4 i,
h4 em,
.h4 em {
  letter-spacing: 0.02em;
}

.subhead-1,
h5,
.h5 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-subhead-1);
  font-weight: 400;
  line-height: var(--line-height-110);
  letter-spacing: 0;
}

.subhead-2,
h6,
.h6 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-subhead-2);
  line-height: var(--line-height-110);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.subhead-3 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-subhead-3);
  font-weight: 100;
  line-height: var(--line-height-110);
  letter-spacing: -0.01em;
}

.subhead-4 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-subhead-4);
  font-weight: 400;
  line-height: var(--line-height-110);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-1 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-detail-1);
  font-weight: 700;
  line-height: var(--line-height-150);
  text-transform: uppercase;
  letter-spacing: 0;
}

.detail-2 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-detail-2);
  font-weight: 400;
  line-height: var(--line-height-150);
  text-transform: uppercase;
  letter-spacing: 0;
}

.detail-3 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-detail-3);
  font-weight: 700;
  line-height: var(--line-height-150);
  text-transform: uppercase;
  letter-spacing: 0;
}

.detail-4 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-detail-4);
  font-weight: 700;
  line-height: var(--line-height-150);
  text-transform: uppercase;
  letter-spacing: 0;
}

.body-1,
p {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-body-1);
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.01em;
}

.body-2 {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-body-2);
  font-weight: 400;
  line-height: var(--line-height-130);
  letter-spacing: 0;
}

.below-image {
  padding-top: 81px;
}

.above-image {
  padding-bottom: 59px;
}

.below-quote {
  padding-top: 64px;
}

.below-quote-6 {
  padding-top: 40px;
}

h1 i,
.h1 i,
h1 em,
.h1 em,
h2 i,
.h2 i,
h2 em,
.h2 em,
h3 i,
.h3 i,
h3 em,
.h3 em,
h4 i,
.h4 i,
h4 em,
.h4 em,
.subhead-1 i,
.subhead-1 em,
.quote-1 i,
.quote-1 em,
.quote-2 i,
.quote-2 em {
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.subhead-1 i,
.subhead-1 em {
  letter-spacing: -0.02em;
}

/* DROP CAPS */
.dropcap {
  color: inherit;
  font-family: var(--font-family-accent);
  font-size: 48px;
  float: left;
  margin-top: -0.09em;
  padding-right: 0.15em;
  letter-spacing: -0.045em;
}

/* BLOCKQUOTE STYLING */

blockquote {
  font-family: var(--font-family-serif);
  margin: 0;
}

blockquote i,
blockquote em {
  font-family: var(--font-family-accent);
  font-style: italic;
}

.quote-1 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-quote-1);
  line-height: 95%;
  letter-spacing: -0.03em;
  font-weight: 200;
  text-align: center;
  padding-top: 0.35em;
  padding-bottom: 64px;
}

.quote-2 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-quote-2);
  line-height: 100%;
  letter-spacing: -0.03em;
  font-weight: 200;
  text-align: center;
  padding-top: 51px;
  padding-bottom: 0.7em;
}

.quote-2 i,
.quote-2 em {
  letter-spacing: 0.02em;
}

.story-page__article p+.quote-2 {
  padding-top: 10px;
}

.story-page__article img+.quote-2 {
  padding-top: 0;
}

.quote-3 {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-quote-3);
  line-height: var(--line-height-80);
  letter-spacing: -0.05em;
}

.read-time {
  display: flex;
  column-gap: 20px;
  flex-wrap: wrap;
}

/* Utility Classes */
.text-decoration-none {
  text-decoration: none;
}

.opacity-50 {
  opacity: 0.5;
}

.utility-center {
  text-align: center;
}

.utility-left {
  text-align: left;
}

.white-text {
  color: var(--color-white);
}

.small-spacer-top {
  margin-top: var(--content-spacer--small);
}

.small-spacer-bottom {
  margin-bottom: var(--content-spacer--small);
}

.large-spacer-bottom {
  margin-bottom: var(--content-spacer--large);
}

.large-spacer-top {
  margin-top: var(--content-spacer--large);
}

.padding-bottom-zero {
  padding-bottom: 0 !important;
}

.margin-top-zero {
  margin-top: 0 !important;
}

@media (max-width: 650px) {
  .mobile-hide {
    display: none;
  }
}

@media (max-width: 950px) {
  .tablet-hide {
    display: none;
  }
}

@media (min-width: 651px) {
  .desktop-hide {
    display: none;
  }
}

@media (min-width: 951px) {
  .xl-desktop-hide {
    display: none;
  }
}

/* LINK STYLING */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

.header_nav {
  background-color: #bb2014;
  color: white;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
}

/* Top Nav Header */
.nav__global--wrapper {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 20px;
  z-index: 10;
}

.nav__global--cosmo-logo {
  max-width: 144px;
  min-width: 115px;
}

.nav__global--feature-logo {
  max-width: 155px;
  justify-self: center;
}

.nav__global--sponsored-logo {
  display: flex;
  justify-content: end;
}

.nav__global--sponsored-logo img {
  width: 143px;
  height: auto;
  z-index: 10;
  position: relative;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 3px;
}

.nav__global--sponsored-logo a {
  position: relative;
  height: fit-content;
}

.nav__global--sponsored-logo a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50px;
  background: #bb2014;
  filter: blur(4px);
  top: 0;
  left: 0;
}

@media (max-width: 650px) {
  .nav__global--feature-logo {
    display: none;
  }

  .nav__global--sponsored-logo {
    grid-column: span 2;
  }
}

/* Sticky Nav Component */
:root {
  --content-height: auto;
}

.sticky-nav__wrapper {
  position: fixed;
  width: 100%;
  height: auto;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg,
      rgba(248, 52, 6, 0) 0%,
      #f83406 38.04%,
      #660c16 100%);
  padding: 16px;
  color: var(--color-white);
  z-index: 999;
}

.sticky-nav__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sticky-nav__container p:hover {
  cursor: pointer;
}

.subhead-3 {
  text-transform: uppercase;
}

summary::-webkit-details-marker {
  display: none;
}

.sticky-nav__wrapper .subhead-3::after {
  content: "▲";
}

.sticky-nav__wrapper details[open] .subhead-3::after {
  content: "▼";
}

#sticky-nav__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(180deg,
      rgba(248, 52, 6, 0) 0%,
      #f83406 21.88%,
      #660c16 100%);
  z-index: -1;
  padding-top: 100px;
  padding-bottom: 105px;
}

.sticky-nav__container a * {
  pointer-events: none;
}

.logo__container {
  width: 100px;
}

.logo__container a {
  height: 100%;
  display: block;
}

.logo__asset-white {
  width: 100%;
  height: 100%;
  /* filter: invert(1); */
}

.sticky-nav__content-link {
  display: inline-block;
  margin-right: 20px;
  text-decoration: none;
  font-weight: 100;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.sticky-nav__content-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sticky-nav__content-link_order {
  font-family: var(--font-family-serif);
  font-size: 20px;
  text-transform: uppercase;
}

.sticky-nav__content-link_head {
  font-family: var(--font-family-serif);
  font-size: 48px;
}

@media (max-width: 650px) {
  .sticky-nav__content-link_head {
    font-size: 28px;
    line-height: 130%;
  }

  .sticky-nav__content-link_order {
    font-size: 15px;
  }

  #sticky-nav__content {
    padding: 100px 20px;
  }
}

/* Outer Glow Container Component */
.image-outer-glow__container {
  padding-bottom: 0 !important;
  /* Middle value of the gradient controls the amount of feathering */
  -webkit-mask-image: radial-gradient(closest-side,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 60%,
      rgba(255, 255, 255, 0) 100%);
  mask-image: radial-gradient(closest-side,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 60%,
      rgba(255, 255, 255, 0) 100%);
}

/* Behind Image Gradient */
.gradient-orb-container {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}

.story-page__article .gradient-orb-container p {
  padding-top: 0;
}

.story-page__article .gradient-orb-container img {
  padding-bottom: 0;
}

.gradient-orb-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f83406;
  border-radius: 50%;
  box-shadow: inset 0 0 5vw 5vw #fff, inset 0 0 10vw 10vw #fff;
  outline: 10px solid white;
  outline-offset: -5px;
  z-index: -10;
}

@media screen and (max-width: 650px) {
  .gradient-orb-container::after {
    top: 50%;
    left: 50%;
    width: 230vw;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: inset 0 0 7vw 7vw #fff, inset 0 0 20vw 20vw #fff;
  }
}

.blur-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HR endcaps */

.rule {
  position: relative;
  border: 0;
  border-top: 1px solid black;
  overflow: visible;
}

.title--divider--white .rule,
.title--cta--white .rule {
  border: 0;
  border-top: 1px solid white;
}

.title--divider--white {
  color: white;
}

.rule--endcap-heart.rule--side-left::before {
  position: absolute;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-size: 100% 100%;
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/endcap-heart.svg");
  background-repeat: no-repeat;
  bottom: -10px;
  margin-left: -10px;
}

.rule--endcap-heart.rule--side-right::after {
  position: absolute;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-size: 100% 100%;
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/endcap-heart.svg");
  background-repeat: no-repeat;
  bottom: -10px;
  margin-right: -10px;
  transform: rotate(180deg);
}

.rule--endcap-triangle.rule--side-right::after {
  position: absolute;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-size: 100% 100%;
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/endcap-triangle.svg");
  background-repeat: no-repeat;
  bottom: -10px;
  margin-right: -10px;
}

.title--divider--white .rule--endcap-triangle.rule--side-right::after,
.title--divider--white .rule--endcap-heart.rule--side-right::after,
.title--divider--white .rule--endcap-heart.rule--side-left::before,
.title--cta--white .rule--endcap-triangle.rule--side-right::after,
.title--cta--white .rule--endcap-heart.rule--side-right::after,
.title--cta--white .rule--endcap-heart.rule--side-left::before {
  filter: invert(1);
}

.rule::before {
  left: 0;
}

.rule::after {
  right: 0;
}

/* HR Endcaps - TITLE TYPE: DIVIDER */

.title--divider {
  position: relative;
  display: grid;
  grid-template-columns: minmax(33px, 1fr) auto minmax(33px, 1fr);
  grid-column-gap: 20px;
  grid-template-rows: auto;
  align-items: center;
  /* Arbritrary styling */
  width: 99%;
  margin: 0 auto;
}

.title--divider h3 {
  grid-column: 2;
  text-align: center;
  font-family: var(--font-family-accent);
  letter-spacing: 0;
}

.title--divider .rule--side-left {
  width: 100%;
  grid-column: 1;
}

.title--divider .rule--side-right {
  width: 100%;
  grid-column: 3;
}

/* HR Endcaps - TITLE TYPE: CTA */

.title--cta {
  position: relative;
  display: grid;

  grid-template-columns: auto minmax(50px, 1fr);
  grid-column-gap: 20px;
  grid-template-rows: auto;
  align-items: center;
  /* Arbritrary styling */
  width: 50%;
}

.title--cta h3 {
  grid-column: 1;
  text-align: center;
  font-family: var(--font-family-accent);
}

.title--cta .rule--side-right {
  width: 100%;
  grid-column: 2;
}

/* Playing Card Component */
/* Use max width and min height to make consistent card ratios, can be overridden inline in the HTML */
.playing-card__wrapper {
  position: relative;
  --card-max-width: 400px;
  --card-min-height: calc(var(--card-max-width) * 1.25);
  max-width: var(--card-max-width);
  min-height: var(--card-min-height);
  text-align: center;
  border-radius: 20px;
  background-color: #fffff1;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 10px;
  width: 100%;
}

.playing-card__wrapper-paper_background::before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/glossy_paper-optimized.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  border-radius: 20px;
}

.playing-card__wrapper-image_background::before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: var(--card-background-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 20px;
}

.playing-card__container {
  border: 1px solid #dc0203;
  border-radius: 20px;
  padding: 7% 10%;
  display: grid;
  row-gap: 30px;
  position: relative;
  min-height: inherit;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  box-sizing: border-box;
}

.playing-card__container::before {
  background-image: url(https://easel.hearstapps.com/assets-sex-after-60-issue/heart.svg);
  position: absolute;
  top: 15px;
  left: 15px;
  content: "";
  width: 45px;
  height: 53px;
  background-size: clamp(18px, 3vw, 44px);
  background-repeat: no-repeat;
}

.playing-card__container::after {
  background-image: url(https://easel.hearstapps.com/assets-sex-after-60-issue/heart.svg);
  position: absolute;
  content: "";
  width: 45px;
  height: 53px;
  background-size: clamp(18px, 3vw, 44px);
  background-repeat: no-repeat;
  right: 15px;
  bottom: 15px;
  rotate: 180deg;
}

.playing-card__heading {
  max-width: 65%;
  margin: 0 auto;
  text-align: center;
}

.playing-card__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.playing-card-carousel__action {
  padding-top: 60px;
}

.playing-card-carousel__wrapper {
  overflow-x: hidden;
  /* overflow-y: hidden; */
  padding-bottom: var(--content-spacer--large);
}

.kinsey-stats-gradient {
  background: linear-gradient(0deg,
      #f83406 0%,
      #88190b 16.15%,
      #38060e 36.98%,
      #38060e 97.4%);
}

.kinsey-card-gradient-top {
  padding-top: 100px;
  background: linear-gradient(0deg, #fff 0%, #fc9f89 56.25%, #f83406 100%);
}

.kinsey-card-gradient-top .quote-1 {
  padding-bottom: var(--content-spacer--small);
}

.kinsey-background-gradient {
  background: linear-gradient(180deg,
      #fff 77.9%,
      #feefec 80.13%,
      #fedfd8 81.87%,
      #fcb2a0 83.93%,
      #fa7759 86.85%,
      #f83406 89.82%,
      #a3230b 92.82%,
      #6a170f 94.81%,
      #350c12 96.42%);
}

/* Image with Text Component */
.image-with-text__container {
  --left-column-width: 50%;
  display: grid;
  grid-template-columns: var(--left-column-width) auto;
  column-gap: 20px;
}

.image-with-text__media {
  display: grid;
  place-content: center;
}

.image-with-text__copy {
  display: flex;
  flex-direction: column;
  place-content: center;
}

/* Landing Page */
.landing-page__hero {
  position: relative;
  overflow: hidden;
  height: clamp(500px, 100vh, 1000px);
}

.landing-page__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-page__hero--overlay {
  position: absolute;
  bottom: 90px;
  right: 0;
  text-align: right;
  color: white;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: end;
  align-content: end;
  row-gap: 20px;
}

.landing-page__hero--overlay--copy {
  max-width: 300px;
  display: grid;
  row-gap: 10px;
}

.landing-page__hero--overlay img {
  max-width: 50vw;
  max-height: 40vh;
  width: 100%;
  height: auto;
}

.gradient__bottom-red::after {
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: "";
  display: block;
  background: linear-gradient(0deg, #f83406 0%, rgba(14, 2, 2, 0) 100%);
  position: relative;
  z-index: 10;
}

.gradient__bottom-red-1::after {
  margin-top: -250px;
  height: 250px;
  width: 100%;
  content: "";
  display: block;
  background: linear-gradient(0deg, #f83507 0%, rgba(14, 2, 2, 0) 100%);
  position: relative;
}

.gradient__top-red {
  position: relative;
}

.gradient__top-red::after {
  height: 60vh;
  width: 100%;
  content: "";
  display: block;
  background: linear-gradient(180deg, #f83406 0%, rgba(14, 2, 2, 0) 100%);
  position: absolute;
  top: 0;
  z-index: -999;
}

.landing-page__card-index .horizontal-scroll__items {
  margin-top: -1px;
  position: relative;
  background: linear-gradient(0deg, rgba(14, 2, 2, 0) 20.31%, #f83406 92.71%);
}

.landing-page__video {
  height: 90vh;
  background: linear-gradient(180deg,
      rgba(248, 52, 6, 0) 0%,
      #f83406 11.02%,
      #1a0503 56.35%,
      #f83406 84.51%,
      rgba(248, 52, 6, 0) 98.31%);
  display: flex;
  place-content: center;
  place-items: center;
}

.landing-page__video video {
  height: 60vh;
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: 7.25px;
  border: 0.362px solid #000;
  z-index: 20;
}

@media (max-width: 650px) {
  .landing-page__video video {
    height: auto;
    max-height: 80vh;
    width: auto;
  }

  .landing-page__hero--overlay img {
    max-width: none;
  }
}

.landing-page__video .custom-controls {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 30;
}

.landing-page__video .custom-controls svg {
  fill: #fff;
  width: 30px;
  height: 30px;
  cursor: pointer;
  pointer-events: all;
  z-index: 9;
}

.landing-page__video .custom-controls::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
      #660c16 24.39%,
      rgba(248, 52, 6, 0.66) 73.23%,
      rgba(248, 52, 6, 0) 100%);
  filter: blur(2px);
}

.landing-page__editor-letter {
  margin-top: 50px;
}

.landing-page__editor-letter--image {
  margin-top: 36px;
  margin-bottom: 48px;
}

.landing-page__editor-letter--content {
  columns: 3;
  column-width: 400px;
  column-gap: 30px;
  hyphens: auto;
}

.landing-page__editor-letter--content p+p {
  margin-top: 20px;
}

.landing-page__editor-letter--signoff {
  text-align: right;
  margin-top: 30px;
}

.landing-page__editor-letter--signoff img {
  max-width: 300px;
}

.landing-page__editor-letter .gradient__bottom-red::after {
  height: 300px;
  z-index: -999;
}

.landing-page__editor-letter--signoff .subhead-4 {
  margin-top: 1em;
}

.landing-page__all-stories-container {
  background: linear-gradient(180deg,
      #f83406 0%,
      #37050e 52.76%,
      #1c0306 86.43%,
      #a10f10 100%);
  padding-top: 60px;
}

.background-light-red {
  background-color: #f83406;
}

.landing-page__little-blue-pill-container {
  background: linear-gradient(180deg, #a10f10 6.99%, #d92e08 70.49%, #fff 100%);
  color: white;
  padding-top: 50px;
  padding-bottom: 100px;
  overflow-x: hidden;
}

.landing-page__little-blue-pill-container .image-with-text__copy {
  row-gap: 20px;
}

.landing-page__little-blue-pill-container img {
  border-radius: 100%;
  border: 1px solid #000;
  right: -7%;
  position: relative;
}

.landing-page__kinsey-container {
  color: white;
  max-width: 80%;
  margin: 0 auto;
  column-gap: 60px;
  --left-column-width: 50%;
}

@media (max-width: 767px) {
  .image-with-text__container {
    grid-template-columns: 1fr;
    max-width: none;
    padding-top: 30px;
    padding-bottom: 30px;
    row-gap: 20px;
  }

  .landing-page__kinsey-container {
    row-gap: 40px;
  }

  .landing-page__editor-letter--signoff {
    text-align: left;
  }

  .landing-page__editor-letter--signoff a {
    text-align: right;
    display: block;
    width: 100%;
    height: 100%;
  }

  .landing-page__editor-letter .gradient__bottom-red::after {
    margin-top: -300px;
  }

  .landing-page__little-blue-pill-container img {
    right: initial;
  }

  .landing-page__little-blue-pill-container .image-with-text__copy {
    order: 2;
    padding-bottom: 150px;
  }
}

.landing-page__kinsey-container .image-with-text__copy {
  row-gap: 20px;
}

.landing-page__cover-story--wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.landing-page__cover-story-container {
  background-image: url('https://easel.hearstapps.com/sex-after-60/assets/lisa-rinna-banner-red-desktop@2x.jpg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  background-color: #f83406;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: inset 0 0 50px 50px #f83406, inset 0 0 15px 15px #f83406;
  border-radius: 500px;
  border: 1px solid #f83406;
  outline: 1px solid #f83406;
  color: white;
  height: 750px;
}

.landing-page__cover-story-container::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 500px;
  border: 1px solid #f83406;
  outline: 1px solid #f83406;
}

.landing-page-cover-story__headline {
  max-width: 600px;
  display: grid;
  row-gap: 20px;
  color: white;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  align-content: center;
  left: 13vw;
}

@media screen and (max-width: 1250px) {
  .landing-page__cover-story--wrapper {
    display: grid;
  }

  .landing-page__cover-story-container {
    background-image: url('https://easel.hearstapps.com/sex-after-60/assets/lisa-rinna-banner-red-mobile@2x.jpg');
    background-position: top right;
    height: 800px;
  }

  .landing-page-cover-story__headline {
    position: relative;
    max-width: none;
    left: 0;
    margin-top: -90px;
  }
}

@media screen and (max-width: 650px) {
  .landing-page__cover-story-container {
    height: 600px;
  }
}

.landing-page__sextoys-container {
  margin-top: 50px;
  position: relative;
  display: flex;
  place-content: center;
}

.landing-page__sextoys-copy {
  color: white;
  max-width: 437px;
  height: auto;
  position: absolute;
  top: 76%;
  width: 33%;
  display: grid;
  row-gap: 6px;
}

@media (max-width: 767px) {
  .landing-page__sextoys-container {
    display: block;
  }

  .landing-page__sextoys-copy {
    position: initial;
    width: 100%;
    padding-bottom: 60px;
    row-gap: 14px;
  }
}

/* Footer - Global */
.feature__footer {
  background: linear-gradient(0deg, #000 38.29%, #670d17 100%);
  color: white;
  padding-top: 20px;
}

.feature__footer-logo {
  display: flex;
  place-content: center;
  place-items: end;
}

.feature__footer-logo img {
  max-width: 90rem;
  width: 100%;
  height: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.feature__footer-credit {
  margin-top: clamp(20px, 5vw, 150px);
  font-family: var(--font-family-serif);
  font-size: 12px;
  padding-bottom: 70px;
  font-weight: 400;
  max-width: 75rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.feature__footer-credit img {
  padding-left: 5px;
}

/* Perspective grid */
.landing-page__perspectives-grid {
  z-index: 1;
  position: relative;
  padding-bottom: var(--content-spacer--large);
  background: linear-gradient(0deg, #f83406 0%, rgba(14, 2, 2, 0) 100%);
  background-size: 100% 200px;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.landing-page__perspectives-grid--wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1em;
  row-gap: 3em;
  margin-top: 50px;
}

.landing-page__perspectives-grid--item {
  grid-column: span 6;
}

.landing-page__perspectives-grid--item .playing-card__wrapper {
  box-shadow: none;
  --card-max-width: none;
  --card-min-height: min(60vw, 44vh);
}

.playing-card__text {
  margin-top: 1em;
  text-align: left;
}

.read-time {
  margin-top: 0.75em;
}

@media screen and (min-width: 950px) {
  .landing-page__perspectives-grid--item {
    grid-column: span 3;
  }

  .landing-page__perspectives-grid--item:nth-of-type(1),
  .landing-page__perspectives-grid--item:nth-of-type(2),
  .landing-page__perspectives-grid--item:nth-of-type(3) {
    grid-column: span 4;
  }

  .landing-page__perspectives-grid--item:nth-of-type(1) .playing-card__wrapper,
  .landing-page__perspectives-grid--item:nth-of-type(2) .playing-card__wrapper,
  .landing-page__perspectives-grid--item:nth-of-type(3) .playing-card__wrapper {
    border: 1px solid black;
  }

  .landing-page__perspectives-grid--item:nth-of-type(1) .playing-card__container,
  .landing-page__perspectives-grid--item:nth-of-type(2) .playing-card__container,
  .landing-page__perspectives-grid--item:nth-of-type(3) .playing-card__container {
    visibility: hidden;
  }

  .landing-page__perspectives-grid--item:nth-of-type(1) h4,
  .landing-page__perspectives-grid--item:nth-of-type(2) h4,
  .landing-page__perspectives-grid--item:nth-of-type(3) h4 {
    font-size: var(--font-size-h2);
    line-height: 90%;
  }
}

/* Footer - Landing Page */
.landing-page__perspectives-grid+.feature__footer {
  background: linear-gradient(180deg, #f83406 20.49%, #660c16 60.5%, #000 100%);
}

/* Lisa Rinna Cover Story */
.hero__section {
  width: 100%;
}

.hero__section img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.lisa-rinna-cover-story {
  overflow-x: hidden;
}

.lisa-rinna-cover-story .story-page__title {
  margin-top: -150px;
}

@media (min-width: 1301px) {
  .lisa-rinna-hero-medium {
    display: none;
  }
}

@media (min-width: 651px) and (max-width: 1300px) {
  .lisa-rinna-hero {
    display: none;
  }

  .lisa-rinna-hero-medium {
    display: block;
  }
}

@media (max-width: 650px) {
  .lisa-rinna-hero {
    display: none;
  }

  .lisa-rinna-hero-medium {
    display: none;
  }
}

/* 2 - Kinsey */
.kinsey-page {
  overflow-x: hidden;
}

.kinsey-page .gradient__top-red {
  padding-top: var(--content-spacer--large);
}

.kinsey-page .gradient__top-red::after {
  height: 200px;
}

@media (min-width: 651px) {
  .kinsey-page .story-page__hero-image-transparent img {
    padding-top: 95px;
  }
}

.kinsey-flexbox {
  display: grid;
  justify-content: space-between;
  align-items: flex-start;
  grid-template-columns: 2fr 4fr;
  column-gap: var(--content-spacer--small);
  grid-auto-flow: dense;
  grid-template-rows: auto 1fr;
}

.kinsey-flexbox div:nth-of-type(1) .quote-2 {
  text-align: left;
}

.kinsey-flexbox div:nth-of-type(2) {
  grid-column: 1 / 2;
}

.kinsey-flexbox-media {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

@media (max-width: 1150px) {
  .kinsey-flexbox {
    row-gap: var(--content-spacer--small);
  }

  .kinsey-flexbox div:nth-of-type(2) {
    order: 3;
    grid-column: span 2;
    max-width: var(--max-page-width-narrow);
    padding: 0 20px;
    justify-self: center;
  }
}

@media (max-width: 650px) {
  .kinsey-flexbox {
    row-gap: var(--content-spacer--small);
  }

  .kinsey-flexbox div:nth-of-type(1) .quote-2 {
    text-align: center;
  }

  .kinsey-flexbox div:nth-of-type(1) {
    order: 1;
    grid-column: span 2;
  }

  .kinsey-flexbox div:nth-of-type(2) {
    order: 3;
    grid-column: span 2;
    padding: initial;
  }

  .kinsey-flexbox .kinsey-flexbox-media {
    order: 2;
    grid-column: span 2;
    grid-row: initial;
  }
}

.story-2-postit-wrapper {
  background: linear-gradient(180deg,
      #f83406 0%,
      #88190b 16.15%,
      #38060e 28.12%,
      #38060e 54.69%,
      #88190b 77.08%,
      #f83406 100%);
}

.story-2-postit-wrapper .draggable-post-it__container {
  height: 700px;
}

.story-2-postit-wrapper .story-page__article--col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 70px;
  margin: 0;
}

.story-2-postit-wrapper .story-page__article--col-2>div {
  width: 100%;
}

.story-2-postit-wrapper .story-page__article--col-2>div.page-width-narrow {
  align-self: center;
  padding-left: 100px;
}

@media screen and (max-width: 950px) {
  .story-2-postit-wrapper {
    padding-top: var(--content-spacer--small);
  }

  .story-2-postit-wrapper,
  .story-2-postit-wrapper .utility-left {
    text-align: center;
  }

  .story-2-postit-wrapper .story-page__article--col-2 {
    grid-template-columns: 1fr;
    margin: auto;
  }

  .story-2-postit-wrapper .story-page__article--col-2>div {
    margin-bottom: 0;
  }

  .story-2-postit-wrapper .story-page__article--col-2>div.page-width-narrow {
    padding-left: initial;
  }

  .story-2-postit-wrapper .h3 {
    font-size: var(--font-size-h4);
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  .story-2-postit-wrapper .draggable-post-it__container {
    height: 500px;
  }
}

@media screen and (min-width: 1400px) {
  .story-2-postit-wrapper .story-page__article--col-2>div.page-width-narrow {
    max-width: none;
  }
}

/* Story: E-Comm */
.ecomm-page__body {
  color: var(--color-white);
}

.ecomm-page__link {
  color: var(--white);
}

.ecomm-page__article__wrapper {
  background: linear-gradient(180deg, #a10f10 0%, #660c16 16.08%, #38060e 24%),
    #d9d9d9;
  max-width: 100%;
  margin: auto;
}

.ecomm-page__article__wrapper>.next-up__wrapper {
  margin-top: 100px;
}

.ecomm-page__dek {
  text-align: center;
}

.ecomm-page__byline__wrapper {
  display: flex;
  justify-content: center;
  gap: 36px;
}

.ecomm-page__metdata__wrapper {
  margin: 72px 0;
}

.ecomm-page__metdata__wrapper>* {
  margin-bottom: 72px;
}

.ecomm-page__article__content p {
  margin-bottom: 36px;
}

.ecomm-page__hero__wrapper {
  background: linear-gradient(0deg, #a10f10 0%, rgba(161, 15, 16, 0) 35.73%),
    radial-gradient(168.07% 100% at 50% 100%, #a10f10 14.54%, #1f0206 100%);
  padding-top: 100px;
}

.ecomm-page__intro__wrapper p {
  margin-bottom: 36px;
}

.ecomm-page__toys_guide {
  margin: 72px 50px 36px;
}

.ecomm-page__toys_guide__header {
  margin-bottom: 60px;
}

.ecomm-page__toys_guide__wrapper {
  display: flex;
}

.ecomm-page__toys_guide__key-wrapper {
  width: calc(100% / 3);
}

.ecomm-page__toys_guide__key {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ecomm-page__toys_guide__key img {
  margin-right: 20px;
}

.ecomm-page__toys_guide__list-wrapper {
  width: calc(100% / 1.5);
}

.ecomm-page__toys_guide__list-items {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.ecomm-page__toys_grid__wrapper {
  columns: 4;
  margin-bottom: 72px;
  column-width: 158px;
}

.ecomm-page__image__container {
  border-radius: var(--border-radius);
  margin-bottom: 15px;
  padding: 20px;
  border: 1px solid var(--color-white);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.ecomm-page__image__key {
  display: flex;
  justify-content: space-between;
}

.ecomm-page__image__key img {
  height: 30px;
}

.ecomm-page__images {
  display: grid;
  justify-content: center;
}

.ecomm-page__images img {
  width: auto;
}

.ecomm-page__cards__wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin: 150px 200px 0;
}

.ecomm-page__cards__container {
  position: relative;
  display: flex;
  max-width: 815px;
  border: 1px solid var(--color-white);
  border-radius: var(--border-radius);
  align-self: flex-start;
}

.ecomm-page__cards__container--even {
  align-self: flex-end;
}

.ecomm-page__cards__image_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  width: calc(100% / 3);
}

.ecomm-page__cards__image_container img {
  width: auto;
  max-height: 450px;
}

.ecomm-page__cards__text_container {
  width: calc(100% / 1.5);
  padding: 24px;
  border-left: 1px solid var(--color-white);
}

.ecomm-page__card__text_subhead {
  text-transform: uppercase;
  font-weight: 700;
}

.ecomm-page__card__text_head {
  font-family: var(--font-family-serif), serif;
  font-size: 48px;
  line-height: 85%;
}

.ecomm-page__cards__text_container>p:not(:last-of-type) {
  margin-bottom: 10px;
}

.ecomm-page__cards__button {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 10px 20px;
  border-radius: 50px;
  background-color: var(--color-green);
  text-decoration: none;
  color: var(--color-black);
  width: auto;
}

.ecomm-page__advertisement {
  display: flex;
  flex-direction: row;
  gap: 60px;
  margin: 100px 150px;
  align-items: center;
}

.ecomm-page__advertisement h3:nth-child(1n) {
  font-size: 55px;
}

.ecomm-page__advertisement h3:nth-child(2n) {
  margin-top: 10px;
  font-size: 48px;
}

.ecomm-page__advertisement-ad-text {
  max-width: 340px;
  margin: 15px auto;
}

.ecomm-page__advertisement div:nth-child(2) {
  z-index: 1;
}

.ecomm-page__advertisement div:nth-child(3) {
  z-index: 1;
}

.ecomm-page__advertisement div:nth-child(4) {
  z-index: 1;
}

.ecomm-page__advertisement-orb {
  position: absolute;
  width: 98%;
  height: 50%;
  left: 15px;
  background: radial-gradient(12.86% 49.92% at 50% 50.08%,
      #f83406 55.07%,
      #a01011 81.38%);
  filter: blur(67px);
  border-radius: 100%;
}

.ecomm-page__advertisement-image {
  border: 1px solid var(--color-white);
  border-radius: 25px;
  padding: 60px 20px;
  position: relative;
}

.ecomm-page__price-badge__container {
  --price-badge-width: 81px;
  position: absolute;
  right: -40px;
  top: -40px;
  width: var(--price-badge-width);
}

.ecomm-page__price-badge__container p {
  position: relative;
  z-index: 1;
  text-align: center;
  vertical-align: middle;
  line-height: var(--price-badge-width);
  color: var(--color-black);
  font-family: var(--font-family-serif);
  font-size: 26px;
}

.ecomm-page__price-badge__container img {
  position: absolute;
  top: 0;
}

.ecomm-page__ad-price-badge__container {
  position: absolute;
  right: -41px;
  top: -32px;
}

.ecomm-page__author__wrapper {
  display: flex;
  gap: 16px;
  padding-top: 36px;
  border-top: 1px solid var(--color-white);
}

.ecomm-page__author__description {
  width: calc(100% - 100px);
}

.ecomm-page__author__description-head {
  font-family: var(--font-family-serif), "serif";
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ecomm-page__author__image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: grey;
}

.ecomm-page__author__description-body {
  font-family: var(--font-family-sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
}

@media (max-width: 992px) {
  .ecomm-page__article__wrapper {
    padding: 0 20px;
  }

  .ecomm-page__article__wrapper>.next-up__wrapper {
    margin-top: 0;
  }

  .ecomm-page__hero__wrapper {
    padding-top: 30px;
  }

  .ecomm-page__cards__wrapper {
    margin: 50px auto 0;
    gap: 44px;
    padding-bottom: 36px;
  }

  .ecomm-page__toys_grid__wrapper {
    padding: 0;
    grid-gap: 12px;
  }

  .ecomm-page__image__key img {
    height: 20px;
  }

  .ecomm-page__image__container {
    padding: 10px;
    height: fit-content;
  }

  .ecomm-page__cards__container {
    flex-direction: column;
  }

  .ecomm-page__cards__text_container {
    width: 100%;
    border-top: 1px solid var(--color-white);
    border-left: none;
  }

  .ecomm-page__cards__image_container {
    width: 100%;
  }

  div.ecomm-page__price-badge__container {
    right: 10px;
    top: 10px;
  }

  .ecomm-page__toys_guide {
    margin: 72px auto 36px;
  }

  .ecomm-page__toys_guide__header {
    margin-bottom: 20px;
  }

  .ecomm-page__toys_guide__wrapper,
  .ecomm-page__toys_guide__list-items {
    flex-direction: column;
  }

  .ecomm-page__toys_guide__wrapper {
    gap: 30px;
  }

  .ecomm-page__toys_guide__key-wrapper,
  .ecomm-page__toys_guide__list-wrapper {
    width: 100%;
  }

  .ecomm-page__toys_guide__list-items li {
    margin-bottom: 10px;
  }

  .ecomm-page__advertisement {
    display: flex;
    flex-direction: column;
    margin: 100px 0;
  }

  .ecomm-page__advertisement-image {
    margin: 0 40px;
  }

  .ecomm-page__advertisement-orb {
    left: 5px;
    height: 150%;
  }

  .ecomm-page__advertisement div:nth-child(4) {
    width: 85%;
    margin: 0 auto;
  }
}

/* Quote Page */
.quote-page {
  overflow-x: hidden;
}

.quote-page .story-page__quote span {
  display: block;
}

.quote-block {
  display: grid;
  row-gap: 20px;
}

.story-page__hero-image-rounded {
  padding-top: 100px;
}

@media (max-width: 650px) {
  .story-page__hero-image-rounded {
    padding-top: 80px;
  }
}

.quote-page .draggable-post-it__container {
  height: 730px;
}

@media (max-width: 768px) {
  .quote-page .draggable-post-it__container {
    height: 430px;
  }
}

.quote-page .post-it__content {
  row-gap: 11px;
}

.quote-page .post-it__attribution {
  display: grid;
  row-gap: 8px;
}

/* Matchbook component */
.matchbook__wrapper {
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/matchbook-bg@2x.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 332px;
  height: 372px;
  border-radius: 3px;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  padding-top: 12px;
  overflow: hidden;
}

.matchbook__content {
  border: 1px solid #dc0203;
  border-radius: 10px;
  width: 308px;
  height: 322px;
  padding: 12px;
  display: grid;
  justify-content: space-between;
  grid-template-rows: 82px auto auto;
  overflow: auto;
}

.matchbook__content--attribution {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
}

.matchbook__content--attribution img {
  width: 70px;
  height: auto;
}

.matchbook__content--attribution div {
  margin-top: 5px;
}

.matchbook__content--audio {
  align-self: end;
}

.matchbook__content--audio-player-interface {
  display: flex;
}

.matchbook__content--audio-player-interface button {
  border: none;
  padding-right: 10px;
}

.matchbook__content--audio-player-interface button:hover {
  background: none;
  cursor: pointer;
}

.matchbook__content .sin-wave {
  width: 100%;
}

.matchbook__content .sin-wave:hover {
  cursor: pointer;
}

.matchbook__content--audio {
  display: grid;
  row-gap: 13px;
}

.matchbook__content blockquote {
  margin-top: 10px;
}

/* Matchbook collage wrapper */
.audio-quote-block {
  position: relative;
  width: 100vw;
  height: 90vh;
  margin-bottom: 10vh;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background-image: url('https://easel.hearstapps.com/celebrities-sex-after-60/assets/matchbook-background-new.jpg');
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
}

.matchbook__wrapper {
  position: absolute;
}

.audio-quote-block {
  --box1-x: 5%;
  --box1-y: 53%;
  --box2-x: 10%;
  --box2-y: 0%;
  --box3-x: 36%;
  --box3-y: 56%;
  --box4-x: 44%;
  --box4-y: 3%;
}

.matchbook__wrapper:nth-child(1) {
  top: var(--box1-y);
  left: var(--box1-x);
  transform: rotate(-9.691deg);
}

.matchbook__wrapper:nth-child(2) {
  top: var(--box2-y);
  left: var(--box2-x);
  transform: rotate(-1.321deg);
}

.matchbook__wrapper:nth-child(3) {
  top: var(--box3-y);
  left: var(--box3-x);
  transform: rotate(4.878deg);
}

.matchbook__wrapper:nth-child(4) {
  top: var(--box4-y);
  left: var(--box4-x);
  transform: rotate(-5deg);
}

@media (max-width: 1210px) {
  .audio-quote-block {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    padding-left: 20px;
    height: auto;
  }

  .matchbook__wrapper {
    left: initial !important;
    top: initial !important;
    position: relative;
    transform: rotate(0deg) !important;
  }
}

@media (max-width: 1020px) {
  .audio-quote-block {
    background-size: 40%;
    background-position: top right;
  }
}

@media (max-width: 942px) {
  .audio-quote-block {
    grid-template-columns: 1fr;
    row-gap: 20px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .audio-quote-block {
    height: auto;
    justify-content: center;
    row-gap: 40px;
    background-position: top center;
    padding-top: 90vw;
    background-size: contain;
    place-items: center;
  }
}

/* Post it component */
.draggable-post-it__container {
  display: grid;
  row-gap: 70px;
  justify-content: center;
  justify-items: center;
  height: 70vh;
  position: relative;
  padding-bottom: 100px;
  color: var(--color-black);
  z-index: 100;
}

.sec_container {
  justify-content: end !important;
}

.post-it__wrapper {
  transform: rotate(-9.405deg);
  backdrop-filter: blur(0);
  /* for safari for filter property */
  width: 450px;
  height: 450px;
  text-align: center;
  background: linear-gradient(324deg,
      #ffffef 10.43%,
      #fffbe0 21.27%,
      #fffadb 38.41%);
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 7.885px rgba(0, 0, 0, 0.25));
  position: absolute;
  top: 18%;
  z-index: 5;
}

.post-it__wrapper:nth-of-type(2) {
  transform: rotate(9deg);
  z-index: 4;
}

.post-it__wrapper:nth-of-type(3) {
  transform: rotate(-9deg);
  z-index: 3;
}

.post-it__wrapper:nth-of-type(4) {
  transform: rotate(15deg);
  z-index: 2;
}

.post-it__wrapper:nth-of-type(5) {
  transform: rotate(-15deg);
  z-index: 1;
}

.post-it__wrapper-paper_background::before {
  content: " ";
  display: block;
  position: absolute;
  background-image: url("https://easel.hearstapps.com/assets-sex-after-60-issue/glossy_paper-optimized.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
  opacity: 0.2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.post-it__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px;
}

.post-it__quote {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.post-it__quote .quote-2 h3 {
  margin-top: 30px;
}

.draggable:hover {
  cursor: grab;
}

.draggable:active {
  cursor: grabbing;
}

@media (max-width: 768px) {
  .post-it__wrapper {
    width: 300px;
    height: 300px;
  }

  .post-it__quote h3 {
    font-size: var(--font-size-h4);
  }

  .post-it__attribution .detail-1 {
    font-size: var(--font-size-detail-3);
  }
}

/* Story: True Tales of (Truly Hot) Sexcapades */

.story-page__hero-image-rounded {
  margin: 0 auto;
}

.story-page__hero-image-rounded img {
  object-fit: cover;
  width: 100%;
  height: 80vh;
  border-radius: 20px;
}

.story-page__hero-image-transparent {
  display: flex;
  place-content: center;
}

.story-page__hero-image-transparent img {
  max-height: 100vh;
  width: auto;
  padding-top: 75px;
}

.story-page__page-width-wide {
  padding: 0 20px;
}

.story-page__page-width-narrow {
  max-width: 696px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}

.story-page__page-width-extra-narrow {
  max-width: 475px;
  margin: 0 auto;
}

.story-page__container {
  display: grid;
  row-gap: var(--content-spacer--large);
}

.gradient__wrapper-A {
  margin-top: 0;
}

.story-page__title {
  display: grid;
  justify-items: center;
}

h1.story-page__title {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 0.35em;
  display: inherit;
}

.story-page__title-dek {
  text-align: center;
  margin-bottom: var(--content-spacer--small);
  margin-top: var(--content-spacer--small);
  max-width: 457px;
}

.story-page__title-byline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--content-spacer--large);
  text-align: center;
}

.story-page__article p,
.story-page__article blockquote,
.story-page__article img {
  padding-bottom: var(--content-spacer--small);
}

.story-page__article__topics {
  display: flex;
  gap: 60px;
  margin-bottom: 50px;
}

.story-page__article--col-2 {
  display: flex;
  flex-wrap: wrap;
  margin: auto 100px;
  color: var(--color-white);
  justify-content: space-between;
}

.story-page__article--col-2-row {
  display: flex;
  flex-direction: row;
}

.story-page__article--col-2>div {
  width: 40%;
  margin-top: 60px;
}

@media (max-width: 950px) {
  .story-page__article__topics {
    flex-direction: column;
    gap: 0;
  }

  .story-page__article--col-2 {
    margin: auto 20px;
  }

  .story-page__article--col-2>div {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 0;
  }
}

.story-page__subhead {
  text-align: center;
}

.story-page__quote {
  position: relative;
  text-align: center;
  width: 100%;
  height: 70vh;
  margin: auto;
}

.story-page__quote p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.story-page__quote-orb {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  display: flex;
  place-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 15%;
  padding-bottom: 15%;
}

.story-page__quote-orb p {
  padding: 0;
}

.story-page__quote-orb p+p {
  margin-top: var(--content-spacer--large);
}

.story-page__quote-orb::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f83406;
  border-radius: 50%;
  box-shadow: inset 0 0 2vw 2vw #fff, inset 0 0 6vw 6vw #fff;
  outline: 10px solid white;
  outline-offset: -5px;
  z-index: -10;
}

@media screen and (max-width: 1089px) {
  .story-page__quote-orb {
    background: linear-gradient(180deg,
        #fff 0%,
        #f83406 16%,
        #f83406 81.5%,
        #fff 100%);
    padding-top: 150px;
    padding-bottom: 200px;
    padding-left: initial;
    padding-right: initial;
  }

  .story-page__quote-orb::after {
    display: none;
  }

  .story-page__quote-orb p+p {
    margin-top: var(--content-spacer--small);
  }
}

.plain-quote {
  padding-top: var(--content-spacer--large);
  padding-bottom: var(--content-spacer--large);
}

.plain-quote p.subhead-2 {
  margin-bottom: var(--content-spacer--small);
}

.story-page__author-container {
  display: flex;
  gap: 16px;
  color: var(--color-white);
  padding-bottom: var(--content-spacer--large);
}

.story-page__author--image {
  width: 70px;
  height: 70px;
}

.story-page__author--image img {
  border-radius: 50%;
}

.story-page__author--description {
  width: calc(100% - 100px);
}

hr {
  border-top: 1px solid white;
  border-bottom: 0;
}

.story-page__author--description-head {
  font-family: var(--font-family-serif), "serif";
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 2px;
}

.story-page__author--description-body {
  font-family: var(--font-family-sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
}

.anchor-link__text {
  font-family: var(--font-family-serif);
  font-size: 24px;
  display: block;
  margin-bottom: 10px;
}

.anchor-link__number {
  font-family: var(--font-family-sans-serif);
  font-size: 16px;
}

.gradient__wrapper-A {
  background: linear-gradient(180deg,
      #37050e 0%,
      #37050e 22.36%,
      #d92e08 71.21%,
      rgba(255, 255, 255, 0) 100%);
}

.image-with-gradient-behind {
  display: flex;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 14.98%,
      #f83406 35.68%,
      #f83406 50.23%,
      #f83406 68.45%,
      rgba(255, 255, 255, 0) 89.15%);
  place-content: center;
}

@media (max-width: 650px) {
  .image-with-gradient-behind {
    padding-left: 0;
    padding-right: 0;
    padding-top: 250px;
    margin-top: -250px;
    padding-bottom: 250px;
    margin-bottom: -200px;
  }

  .image-with-gradient-behind img {
    padding: 0;
  }
}

.ecomm-page__body .gradient__bottom-credits {
  background: linear-gradient(180deg, #38070f 0%, #670d17 100%);
}

.gradient__wrapper-bottom {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 50%,
      #f83406 63.93%,
      #660c16 100%);
}

.gradient__bottom-lisa {
  background: linear-gradient(180deg, #fff 0%, #fff 90%, #f83406 100%);
}

.gradient__bottom-all-stories {
  background: linear-gradient(180deg, #fff 0%, #fff 60%, #f83406 100%);
}

.gradient__bottom-credits {
  background: linear-gradient(180deg, #f83406 0%, #660c16 77.99%);
}

.gradient__bottom-credits hr {
  margin: 0;
}

.gradient__bottom-credits hr+p {
  margin-top: var(--content-spacer--small);
}

.gradient__bottom-credits p+hr {
  margin-top: var(--content-spacer--small);
  margin-bottom: 0;
}

/* Snippet: Keep Reading */

.keep-reading__grid {
  background-color: var(--color-eggplant);
  padding-top: var(--content-spacer--large);
  padding-bottom: var(--content-spacer--large);
  color: var(--color-white);
  outline: 3px solid var(--color-eggplant);
  outline-offset: -1px;
}

.keep-reading__grid .title--cta {
  width: clamp(165px, 80vw, 374px);
}

.keep-reading__grid--wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1em;
  row-gap: 3em;
  margin-top: 5vw;
}

.keep-reading__grid--item {
  grid-column: span 6;
}

.keep-reading__grid--item .playing-card__wrapper {
  max-height: none;
  min-height: 0;
  height: clamp(230px, 60vw, 510px);
}

@media screen and (min-width: 950px) {
  .keep-reading__grid--item {
    grid-column: span 3;
  }
}

/* Component: Video or Image 2 Column */

.two-column__wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
  max-height: 80vh;
  overflow: hidden;
  margin-bottom: var(--content-spacer--small);
}

.two-column__type-B {
  align-items: center;
  justify-items: center;
}

.two-column__type-B .two-column__wrapper--column-1 {
  height: auto;
  width: clamp(183px, 25vw, 319px);
  grid-template-columns: 100%;
}

.two-column__wrapper div {
  max-height: inherit;
  height: inherit;
  display: grid;
  justify-content: center;
  justify-items: center;
  width: 100%;
}

.two-column__wrapper img,
.two-column__wrapper video {
  object-fit: contain;
  max-height: inherit;
  width: 100%;
  height: auto;
}

.two-column__type-A img,
.two-column__type-A video {
  object-fit: cover;
  max-height: 100%;
  height: 100%;
}

@media screen and (max-width: 750px) {
  .two-column__type-A {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: hidden;
  }

  .two-column__type-A div {
    max-height: 110vw;
    height: auto;
  }
}

@media screen and (max-width: 650px) {
  .two-column__wrapper {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .two-column__type-B {
    row-gap: 36px;
  }

  .two-column__wrapper img,
  .two-column__wrapper video {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .two-column__type-B .two-column__wrapper--column-1 {
    order: 2;
  }
}

/* Component: Next Up */

.next-up__wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 250px;
  width: 17vw;
  left: 20px;
  z-index: 99;
}

.next-up__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.next-up__container {
  display: flex;
  gap: 10px;
}

.next-up__header {
  margin-bottom: 0.3em;
}

.next-up__thumbnail {
  width: 80px;
  height: 95px;
  background-color: grey;
  border-radius: 20px;
  flex-shrink: 0;
}

.next-up__thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.next-up__text .h4 {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  font-size: var(--font-size-subhead-2);
}

.next-up__text .detail-4 {
  font-weight: 400;
  margin-top: 0.25em;
}

.story-page__article .next-up__wrapper p,
.story-page__article .next-up__wrapper blockquote,
.story-page__article .next-up__wrapper img {
  padding-bottom: initial;
}

@media (max-width: 1150px) {
  .ecomm-page__body .next-up__wrapper {
    border-top: 1px solid #ffffff33;
    border-bottom: 1px solid #ffffff33;
  }

  .next-up__wrapper {
    position: initial;
    transform: initial;
    max-width: var(--max-page-width-narrow);
    width: 100%;
    padding: 20px 0;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #00000020;
    border-bottom: 1px solid #00000020;
    margin-bottom: var(--content-spacer--small);
  }

  .next-up__content {
    display: flex;
    flex-direction: row;
  }
}

@media (max-width: 550px) {
  .next-up__container {
    flex-direction: column;
  }

  .next-up__text .h4 {
    margin-top: 0;
  }
}

/* Image Banner Styling */

.image-banner {
  margin-top: 250px;
}

.image-banner-no-padding {
  padding: 0;
}

/* Video collage section */
.video-collage-block {
  display: grid;
  grid-template-columns: 40% auto;
  column-gap: 7vw;
  margin: var(--content-spacer--small) 0;
}

.video-collage-block__column:nth-child(1) {
  display: grid;
  justify-items: end;
}

.video-collage-block__column:nth-child(1) video {
  width: 40%;
  height: auto;
  margin-top: clamp(-360px, -35vw, -100px);
  margin-right: -10vw;
}

.video-collage-block__column:nth-child(2) {
  margin-top: 4vw;
  padding-right: 20px;
}

.video-collage-block__column:nth-child(2) .quote-2 {
  text-align: left;
  margin-bottom: var(--content-spacer--large);
  max-width: 577px;
  padding-top: 0;
  padding-bottom: 0;
}

.video-collage-block__column:nth-child(2) p {
  padding-left: 25%;
}

.video-collage-block__mobile-quote {
  display: none;
}

@media screen and (max-width: 768px) {
  .video-collage-block {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .video-collage-block__mobile-quote {
    display: initial;
    text-align: center;
    padding-top: var(--content-spacer--small);
  }

  .video-collage-block__column:nth-child(1) video {
    margin-top: -17%;
    margin-right: 8%;
  }

  .video-collage-block__column:nth-child(2) {
    padding-left: 20px;
    max-width: var(--max-page-width-narrow);
    margin: 0 auto;
    margin-top: var(--content-spacer--small);
  }

  .video-collage-block__column:nth-child(2) .quote-2 {
    display: none;
  }

  .video-collage-block__column:nth-child(2) p {
    padding-left: 0;
  }
}

/* Story 10 */
.img-matchstick {
  width: 100%;
  display: flex;
  place-content: center;
}

.img-matchstick img {
  transform: rotate(20deg);
  max-width: 150px;
}

/* floating images */
.float-right {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr var(--max-page-width-narrow) 1fr;
  left: 0;
  width: 100%;
  padding: 0 20px;
}

.float-right img {
  max-width: 250px;
  width: 100%;
  grid-column: 3;
}

@media (max-width: 950px) {
  .float-right {
    position: initial;
    display: block;
    width: 100%;
  }

  .float-right img {
    max-width: 92px;
    width: 100%;
  }

  .floating-mobile-full-width img {
    max-width: none;
    width: 100%;
    padding-bottom: 0;
  }

  .floating-author-pic {
    display: flex;
    margin-top: calc(-1 * var(--content-spacer--large));
  }

  .floating-author-pic img {
    max-width: 150px;
    margin: 0 auto;
  }
}

/* new card slider */
.main-pin--landing {
  background: #f83406;
}

.main-pin--landing .title--divider {
  padding-top: 30px;
  padding-bottom: 10px;
}

.horizontal-scroll__items {
  padding-top: 50px;
  padding-bottom: 25px;
}

.landing-page__card-index .horizontal-scroll__items {
  padding-top: 30px;
}

.main-pin,
.horizontal-scroll__wrapper,
.horizontal-scroll__items {
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main-pin,
.horizontal-scroll__wrapper {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.horizontal-scroll__items {
  display: flex;
  gap: 1.5rem;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  flex-wrap: nowrap;
  width: auto;
  scroll-padding: 1.5rem;
  align-items: start;
}

.horizontal-scroll__item {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: clamp(200px, 22vw, 400px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.horizontal-scroll__item:first-child {
  margin-left: 1.5rem;
  scroll-snap-align: start;
}

.horizontal-scroll__item:last-child {
  margin-right: 1.5rem;
  scroll-snap-align: end;
}

.horizontal-scroll__item .playing-card__wrapper {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  max-width: none;
  min-height: 0;
  height: clamp(290px, 31vw, 580px);
}

.horizontal-scroll__wrapper .pin-spacer .playing-card__container {
  height: 100%;
}

.horizontal-scroll__wrapper::-webkit-scrollbar,
.horizontal-scroll__items::-webkit-scrollbar,
.main-pin::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll__wrapper .body-2 {
  margin-top: 0.5em;
}

@media (hover: hover) {
  .horizontal-scroll__item:last-child {
    margin-right: 30vw;
  }
}

@media only screen and (max-width: 1150px) {
  .horizontal-scroll__item .h3 {
    font-size: var(--font-size-h4);
  }
}

.playing-card-style .horizontal-scroll__item {
  width: clamp(216px, 40vw, 400px);
  height: clamp(314px, 55vw, 580px);
}

.playing-card-style .horizontal-scroll__item .playing-card__wrapper {
  height: inherit;
}

.playing-card-style .subhead-4 {
  font-size: clamp(8px, 1.5vh, 16px);
}

.playing-card-style h3 {
  font-size: clamp(19px, 7vw, 36px);
}

.playing-card-style .playing-card__content .h4 {
  font-size: clamp(14px, 5vw, 22px);
}

.playing-card-style .playing-card__footer .h4 {
  font-size: clamp(14px, 5vw, 22px);
  margin-bottom: 3px;
}

.playing-card-style .detail-1 {
  font-size: clamp(8px, 1.25vh, 14px);
}

.playing-card-style .detail-3 {
  padding-left: 10px;
  padding-right: 10px;
  font-size: clamp(8px, 1vh, 14px);
  line-height: 1.25;
}

.playing-card-style .playing-card__container {
  row-gap: clamp(4px, 1vh, 30px);
  padding: 6% 8%;
}

@media screen and (max-width: 950px) {
  .playing-card-style .horizontal-scroll__item {
    width: clamp(216px, 80vw, 400px);
    height: clamp(314px, 60vh, 580px);
  }
}

.playing-card-style .playing-card__container::after,
.playing-card-style .playing-card__container::before {
  background-size: clamp(18px, 2vw, 44px);
}

@media screen and (max-height: 700px) and (hover: hover) {
  .horizontal-scroll__item .playing-card__wrapper {
    height: 43vh;
  }

  .playing-card-style .horizontal-scroll__item .playing-card__wrapper {
    max-height: 72vh;
  }
}