:root {
       --page: #f7f7f7;
       --text: #343945;
       --card: #ffffff;
       --gap: 20px;
       --visible-items: 4;
   }

   .partners {
       width: min(1000px, 100%);
       margin: 0 auto;
       padding: 0 12px 18px;
       overflow: hidden;
   }

   .partners .contextual.open .contextual-links {
       display: flex;
   }

   .partners__title {
       margin: 0 0 29px;
       text-align: center;
       color: #343945;
       font-size: 2.42rem;
       font-weight: 200;
       line-height: 1;
       letter-spacing: 0;
   }

   .partners__carousel {
       display: grid;
       grid-template-columns: 52px minmax(0, 1fr) 52px;
       align-items: center;
       gap: 0px;
       padding: 30px 20px;
   }

   .partners__viewport {
       overflow: hidden;
       padding: 10px 28px;
   }

   .partners__track {
       display: flex;
       gap: var(--gap);
       transition: transform 420ms ease;
       will-change: transform;
   }

   .partner-card {
       flex: 0 0 calc((100% - (var(--gap) * (var(--visible-items) - 1))) / var(--visible-items));
       height: 60px;
       border: 1px solid #e7e7e7;
       border-radius: 17px;
       display: grid;
       place-items: center;
       background: var(--card);
   }

   .partner-logo {
       display: block;
       max-width: 82%;
       max-height: 56px;
       object-fit: contain;
       margin: auto;
   }

   .partners__arrow {
       width: 50px;
       height: 80px;
       border: 0;
       display: grid;
       place-items: center;
       padding: 0;
       background: transparent;
       color: #333946;
       cursor: pointer;
   }

   .partners__arrow svg {
       width: auto;
       height: 50px;
       stroke-width: 8.5;
       transition: transform 160ms ease;
   }

   .partners__arrow:hover svg {
       transform: scale(1.08);
   }

   .partners__arrow:focus-visible {
       outline: 3px solid #333946;
       outline-offset: 5px;
       border-radius: 8px;
   }

   @media (max-width: 1180px) {
       :root {
           --gap: 24px;
           --visible-items: 3;
       }

       .partners__carousel {
           gap: 18px;
       }
   }

   @media (max-width: 760px) {
       :root {
           --gap: 18px;
           --visible-items: 1;
       }

       .partners {
           padding: 0;
       }

       .partners__title {
           margin-bottom: 20px;
           font-size: 2rem;
       }

       .partners__carousel {
           grid-template-columns: 44px minmax(0, 1fr) 44px;
           gap: 10px;
       }

       .partner-card {
           height: 76px;
           border-radius: 16px;
       }

       .partners__arrow,
       .partners__arrow svg {
           width: 44px;
           height: 64px;
       }

       .partners__viewport {
           padding: 10px 20px;
       }
   }