@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

:root {
  --w-max: 96em;
  --padding-wrapper: 1rem;

  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;

  --ff-primary: "Outfit", sans-serif;
  --fz-primary: 0.9375rem;
  --fz-secondary: 1.375rem;

  --fw-bold: 700;

  --lh-primary: 1.2;
  --lh-secondary: 1.4;

  --cl-white: hsl(0, 0%, 100%);
  --cl-slate-300: hsl(212, 45%, 89%);
  --cl-slate-500: hsl(216, 15%, 48%);
  --cl-slate-900: hsl(218, 44%, 22%);

  --border-r-primary: 1.25rem;
  --border-r-secondary: 0.625rem;

  --box-shadow: 0px 25px 25px 0px hsl(0, 0%, 0%, 0.05);

  --trans-img: 0.3s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block-start: 0;
  margin-block-end: 0;
}

body{
  font-family: var(--ff-primary);
  color: var(--cl-slate-900);
  line-height: var(--lh-primary);
}

.wrapper {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  background-color: var(--cl-slate-300);
}

[class*="__container"] {
  max-inline-size: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--padding-wrapper);
}

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qr-item {
  max-inline-size: 20rem; /* 320px*/
  padding: var(--spacing-sm)
           var(--spacing-sm)
           var(--spacing-lg)
           var(--spacing-sm);
  border-radius: var(--border-r-primary);
  background-color: var(--cl-white);
  box-shadow: var(--box-shadow);
}

.qr-item > *:not(:last-child) {
  margin-block-end: var(--spacing-md);
}

@media (any-hover: hover),
(pointer: fine) {
  .qr-item:hover img {
    transform: scale(1.01);
  }
}

.qr-item__image {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--border-r-secondary);
}

.qr-item__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  will-change: transform;
  transform: translateZ(0);
  transition: transform var(--trans-img);
}

@media (prefers-reduced-motion: reduce) {
  .qr-item__image img {
    transition: none;
  }
}

.qr-item__content {
  padding-inline: var(--spacing-sm);
  text-align: center;
}

.qr-item__content>*:not(:last-child) {
  margin-block-end: var(--spacing-sm);
}

.qr-item__title{
  font-size: var(--fz-secondary);
}
.qr-item__content p {
  line-height: var(--lh-secondary);
  color: var(--cl-slate-500);
  letter-spacing: 0.2px;
}