.useful-resources {}

.useful-resources-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}


.useful-resources-item {
   text-align: center;
   transition: all 0.5s ease 0s;
   display: block;
   background: #fff;
   padding: 40px 24px;
   text-decoration: none;
}

.useful-resources-item:hover {
   box-shadow: var(--shadow-dark);
}

.useful-resources-item-icon {
   height: 100px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
}

.useful-resources-item-icon img {
   height: auto;
   max-height: 100px;
}

.useful-resources-item-name {
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.4;
   color: var(--color-neutral-dark);
   text-decoration: none;
}

.img-row {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   gap: 10px;
   overflow-x: auto;
}

.img-row img {
   height: 300px;
   width: auto;
   object-fit: contain;
}

.widget-content a {
   color: var(--color-neutral-dark);
}

@media (max-width: 1200px) {
   .useful-resources-row {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 900px) {
   .useful-resources-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
   }

   .useful-resources-item {
      padding: 20px;
   }
}

@media (max-width: 640px) {
   .useful-resources-row {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .useful-resources-item {
      padding: 15px;
   }

   .useful-resources-item-icon {
      height: 80px;
   }

   .useful-resources-item-icon img {
      max-height: 80px;
   }
}