#frames {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
}

.grid-container {
  display: grid;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  /* controls block ratio */
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 10px;

  grid-template-areas:
    ".       .   empty1 empty1    logo logo logo logo              welcome welcome welcome welcome welcome welcome welcome welcome"
    ".       .   empty1 empty1    logo logo logo logo              welcome welcome welcome welcome welcome welcome welcome welcome"
    "news   news news   news      logo logo logo logo              welcome welcome welcome welcome welcome welcome welcome welcome"
    "news   news news   news      logo logo logo logo              welcome welcome welcome welcome welcome welcome welcome welcome"
    "forum  forum forum forum     gallery gallery gallery gallery  project project project project .        .         .      ."
    "forum  forum forum forum     gallery gallery gallery gallery  project project project project empty2   .         .      ."
    ".       .     .    .         gallery gallery gallery gallery   edu     edu    edu      edu     student   student student student"
    ".       .     .    empty3    gallery gallery gallery gallery   edu     edu    edu      edu     student    student student student";
}

/* Default block styling */
.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

/* Assign areas */
.logo {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: none;
  /* remove background */
  border: none;
  /* remove border */
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* image fully visible */
  display: block;
}

.welcome {
  grid-area: welcome;
  background: #134b34;
  text-align: left;
}

.news {
  grid-area: news;
  background: #a5595d;
  color: #e59b29;
}

.forum {
  grid-area: forum;
  background: #6cb299;
  color: #1b4733;
}

.gallery {
  grid-area: gallery;
  background: #fb7767;
  color: #c5f9ce;
}

.project {
  grid-area: project;
  background: #f7bfc7;
  color: #1b4733;
}

.edu {
  grid-area: edu;
  background: #f9b653;
  color: white;
}
.student {
  grid-area: student;
  background: #f4efd4;
  color: #1b4733;
}
.empty1 {
  grid-area: empty1;
  background: #e59b29;
}

.empty2 {
  grid-area: empty2;
  background: #a5595d;
}

.empty3 {
  background: #f7bfc7;
  grid-area: empty3;
}

/* Welcome block */
.welcome h2 {
  margin-top: 0;
  font-size: 40px;
  font-weight: 100;
  text-align: center;
}

.welcome p {
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5;
}

.grid-item h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.grid-item {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.grid-item h3 {
  font-size: 30px;
  font-weight: 100;
}

.grid-item p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.grid-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Responsive */
@media (max-height: 750px) and (min-width: 1024px) {
  .grid-container {
    height: auto;
    margin-bottom: 50px;
    margin-top: 50px;
  }
}

@media (max-width: 1200px) {
  .grid-33 {
    grid-template-columns: 100%;
  }
}

@media (max-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "logo welcome"
      "news welcome"
      "forum project"
      "gallery gallery"
      "student student"
      "edu edu";
    height: auto;
  }

  .empty1,
  .empty2,
  .empty3 {
    display: none;
  }
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "welcome"
      "gallery"
      "student"
      "edu"
      "project"
      "news"
      "forum";
  }

  .logo img {
    max-width: 180px;
  }
}

.grid-item {
  position: relative;
  overflow: hidden;
  min-height: 60px;
}

.hover-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.grid-item:hover .hover-btn {
  opacity: 1;
  transform: translateY(0);
}

.btn-index-red {
  color: #a5595d;
  background-color: white;
}

.btn-index-pink {
  color: #f7bfc7;
  background-color: #1b4733;
}

.btn-index-green {
  color: #6cb299;
  background-color: #1b4733;
}

.btn-index-salmon {
  color: #fb7767;
  background-color: #c5f9ce;
}

.btn-index-yellow {
  color: #f9b653;
  background-color: white;
}
.btn-index-beige {
  color: #f4efd4;
  background-color: #1b4733;
}