body { overflow-x: hidden; }
:root {
    --border: rgb(3, 169, 244);
    
    --g1: rgb(22, 23, 31);
    --g2: rgb(27, 31, 70);
    --g3: rgb(9, 5, 68);
  }
/*
article {
    max-width: 770px;
    background-color: #00000010;
    border: 2px solid #0d1116;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    opacity: 0;
    transition: all .5s;
}
*/

article {
    max-width: 770px;
    border: 2px solid #0d1116;
    border-radius: 10px;
    margin: 20px;
    opacity: 0;
    transition: all .5s;
    position: relative;
}

.card-content {
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.075) 8%, 
        transparent 8%
    );
    background-position: 0% 0%;
    background-size: 2.5vmin 2.5vmin;
    padding: 20px;
    position: relative;
    transition: background-position 350ms ease;
    width: calc(100% - 40px);
    z-index: 2;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    
}

article:before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    background: linear-gradient(
        130deg, 
        transparent 0% 33%, 
        var(--g1) 66%, 
        var(--g2) 83.5%, 
        var(--g3) 100%
      );
    background-position: 0%, 0%;
    background-size: 300% 300%;
    transition: background-position 350ms ease, transform 350ms ease;
}

article:has(img:hover):before {
    background-position: 100% 100%;
    transform: scale(1.08, 1.03);
    border: 2px solid #0d1116;
    border-radius: 10px;
}

article:has(img:hover) > .card-content {
    background-position: -10% 0%;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.062) 8%, 
        transparent 8%
    );
}

.title {
    grid-area: 1 / 1 / 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.description {
    grid-area: 1 / 2 / 3 / 4; 
    display: flex;
    align-items: center;
    flex-direction: column;
}

.description > * { flex-grow: 1;}

.big h2 { margin-top: 0; text-align: center; }
.small h2 { margin-bottom: 0; text-align: center;}
.align-right { float: right; }
.align-left { float: left; }
/*article:hover, article:has(*:hover)  { background-color: #1100ff0c; }*/
article a { color: #2255bb; text-decoration: none; }
article a:hover { color: #114488; }
article.align-left { transform: translateX(-30%) scale(0.95); }
article.align-right { transform: translateX(30%) scale(0.95); }

article.active {
    opacity: 1;
    transform: translateX(0%) scale(1);
}

img { transition: 100ms ease-in all; width: 11em; }
.title a { display: flex; align-items: center;}

img:hover {
    /*outline: 2px solid #114488;*/
    transform: scale(1.1);
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.274);
}