.card { display: flex; flex-direction: column; border: 1px solid lightgrey; max-width: 387px; transition: box-shadow 0.3s ease-in-out; background: #fff; color: #1c1c1c; } .card:hover, .card:focus { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); text-decoration: none; } .card__image { width: 388px; height: 272px; object-fit: cover; flex-shrink: 0; } .card__content { display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.2rem; } .card__eyebrow { font-size: 13px; font-weight: 700; color: var(--color-tertiary); text-transform: capitalize; margin-bottom: .5rem; } .card__title { font-family: var(--font-secondary); font-size: 1.3rem; text-transform: capitalize; margin-bottom: 0.5rem; } .card__date { font-size: 14px; margin-bottom: 2rem; color: grey; } .card__link { color: var(--color-quaternary); margin-top: auto; transition: color 0.2s ease-in-out; } .card:hover .card__link, .card:focus .card__link { color: var(--color-tertiary); }  .footer { color: white; background: linear-gradient(90deg, var(--color-quaternary) 0%, var(--color-quinary) 100%); } .footer__inner { display: grid; grid-template-areas: "contact" "menu" "copyright"; gap: var(--gap); padding: var(--y-gap) var(--x-gap); } .footer__label { font-weight: bold; margin-bottom: 5px; } .footer__logo { margin-bottom: 2.4rem; } .footer__location { display: grid; font-size: 1rem; line-height: 1.66667; max-width: 320px; margin-bottom: 2.5rem; } .footer__contact { grid-area: contact; } .footer__hour { display: flex; justify-content: space-between; gap: 10px; max-width: 300px; } .footer__sns { grid-area: sns; } .footer__information { font-size: 12px; line-height: 1.77778; margin-bottom: 1rem; } .footer__menus { grid-area: menu; display: grid; grid-template-columns: 1fr 1fr; gap: 7.98vw; } .footer__menus .menu { border-top: 1px solid rgba(255, 255, 255, 0.20); padding-top: 9px; font-size: 12px; line-height: 1.5; } .footer__menus .menu__link { margin-bottom: 18px; transition: color .2s ease-in-out; font-size: 1rem; } .footer__menus .menu__link:hover, .footer__menus .menu__link:focus { color: var(--color-tertiary); text-decoration: underline; } .footer__copyright { grid-area: copyright; display: grid; align-items: end; border-top: 1px solid #D4D2E3; padding-top: 20px; line-height: 1.4; gap: 20px; } .footer__copyright .menu, .footer__copyright .menu__item { display: inline; margin-bottom: 0; } .footer__separator::before, .footer__copyright .menu__item::before { content: " | "; margin: 0 5px; } .footer__copyright .menu__link { margin-bottom: 0; text-decoration: underline; opacity: .8; } .footer__disclaimer { display: inline-block; font-size: 10px; line-height: 1.4; max-width: 975px; opacity: .8; text-wrap: pretty; } .footer__jumpem { font-size: 12px; margin-top: .5rem; line-height: 1.4; } .footer__jumpem img { height: 1.05em; vertical-align: middle; margin-top: -1px; } .footer__icons { display: flex; gap: 1px; } .footer__information .menu__link { transition: color .2s ease-in-out; } .footer__information .menu__link:hover, .footer__information .menu__link:focus { color: var(--color-tertiary); text-decoration: underline; } /* */ @media(min-width: 992px) { .footer__inner { grid-template-areas: "contact menu" "copyright copyright" ; grid-template-columns: auto min-content; gap: 7.7rem var(--gap); } .footer__menus { grid-template-columns: 123px 208px; justify-content: end; } .footer__information { font-size: 1rem; } .footer__location { font-size:1.1rem; } .footer__copyright { grid-template-columns: 1fr 150px; justify-content: space-between; } }  .sns { display: flex; gap: 16px; } .sns__link svg { fill: white; transition: fill .2s ease; } .sns__link:hover svg { fill: var(--color-tertiary); }