/* ------------ */
/* FOSS JOURNAL */
/* ------------ */

.foss-programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    margin-top: 12px;
}

.foss-programs-grid img {
    width: 100%;     
    max-width: 60px; 
    display: block;
    margin: 0 auto;
    margin-top: 12px;
}

/* ---------- */
/* OFFER GRID */
/* ---------- */


.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}

.grid-item {
    display: flex;
    flex-direction: column;  /* ← to ustawia tekst NAD obrazkiem */
    align-items: center;
    text-align: center;
}

        
/* ------- */
/* ARTWORK */
/* ------- */
       
.artwork{
    display: grid; /* turn on grid */
    grid-template-columns: repeat(3, 220px); /* creates a 2 columns of width of 220px*/
    gap: 2px;
    width: fit-content; /* container fits in to value */
    margin: 0 auto; /* this centers the whole grid */
}

.artwork div{
    padding: 4px;
    border: 1px groove rgb(173, 175, 125);
    display: flex;          /* it's turn on flex on the dive to make them have functions below */
    justify-content: center; /* it's center the content which are the images */
    align-items: center;     /* it's centers div's vertical */
}

/* ------------------------- */
/* PRIVACY / ANIMATIONS GRID */
/* ------------------------- */

/* ------------------------------------- */
/* LOCATION  = ../subsites/about-me.html */
/* ------------------------------------- */

.grid-privacy,
.grid-animations {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 20px;
  justify-content: center;
}

.grid-card-privacy,
.grid-card-animations {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px greenyellow solid;
}

.grid-card-privacy img,
.grid-card-animations img {
  width: 100%;
  object-fit: contain;
}    

/* ----------------------------------------- */
/* LOCATION  = ../subsites/find-me-here.html */
/* ----------------------------------------- */

.socials-grid {
    display: grid;
    gap: 22px;
    padding-top: 22px;
    margin: 0 auto; /* Centers the images*/
    width: fit-content;
    grid-template-columns: repeat(2, 120px);
}

.socials-grid img {
    width: 100%; 
    display: block;
    border: 4px greenyellow solid;
}