/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 10/2026
 * ===========================
 */

:root {
  --no-shadow: 0px 0px 2px rgba(0, 0, 0, 0);
  --small-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  --large-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  --transition-time: 250ms;
}

body {
  /*background: rgba(212,235,245,.45);*/
}
.certificate-section {
  padding:48px 0;
}
.certificate-section h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  margin-bottom:48px;
  text-align:center;
}

ul.simple-list {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  align-items:stretch;
  grid-gap:24px;
  margin:0;
  padding:0;
  list-style-type: none;
  li a, li a img.thumbnail {
    border-radius:10px;
    overflow:hidden;
  }
  li {
    height:100%;        
    a {
      position:relative;
      display:grid;
      grid-template-columns: 100px 1fr;
      grid-gap:18px;
      justify-content: start;
      align-items: center;      
      padding:12px;
      height:100%;
      background:white;
      border-top-right-radius: 0;
      box-shadow: var(--small-shadow);
      transition: margin var(--transition-time),
        box-shadow var(--transition-time);
      &:hover,
      &:focus {
        box-shadow: var(--no-shadow);
        margin: 0.1rem -0.1rem -0.1rem 0.1rem;
        transition: margin var(--transition-time),
          box-shadow var(--transition-time);
      }
      .flag-icon {
        position:absolute;
        top:2px;
        right:2px;
        width:100%;
        display:flex;
        justify-content: end;
        align-items: end;
        flex-direction: row;
        gap:2px;
        img {
          width:30px;
          margin:0;
        }
      }
      .title {
        font-weight: bold;
        font-size: 1.15rem;
        line-height:1.4;
        color:#262626;
      }
      &:hover, &:focus {
        img.thumbnail {
          opacity:.8;
        }
        .title {
          color:#0072c6;
        }
      }
    }
  }
}