* {
    margin: 0;
    padding: 0;
    box-sizing: 0;

}

.collapsible {
  background-color: #777;
  color: white;
  cursor: help;
  padding: 14px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  height: 40px;
  background: rgb(113 113 113 /0.6);
  font-family: Julius Sans One;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  display: none;
  overflow: hidden;
  /* background-color: #ffffff; */ 
}

.content{
    position: relative;
    gap: 0.482rem;
    grid-template-columns: 1fr;
    padding: 0.482rem;
    z-index: 2;
    /* background: rgb(113 113 113 /0.4); */
    background:rgb(0 0 0 /0.45);
    
}


.content img {
    width: 70%;
    max-width: 400px;      
    object-fit: cover;
    aspect-ratio: 1/1;
    clip-path: polygon(100% 0, 100% 75%, 77% 100%, 0% 100%, 0 23%, 25% 0);
    transition: ease-in-out 0.2s;
}

.content figure:hover {
    transform: scale(1.05);
    transition: ease-in-out 0.4s;
    max-width: 400px;    
    object-fit: cover;
    cursor: pointer;

    
}

.content figure{
    transition: ease-in-out 0.2s;
}

.content figcaption{
  transform: translateY(-2.482rem);
    text-align: center;
    font-family: Turret Road;
    font-size: medium;
    text-decoration: none;
    color: white;
    outline: 0.5rem;
    outline-color: black;
    text-shadow: #000000 0 0.12rem 0.12rem;
    text-decoration: none;
}


@media screen and (min-width:500px) {
    .content {
        grid-template-columns: 1fr 1fr;

    }
    #title {
    width: 320px;
    height: 80px;
    }
}

@media screen and (min-width:700px) {
    .content{
        grid-template-columns: 1fr 1fr 1fr;

    }
     #title {
    width: 320px;
    height: 80px;
    }
}

@media screen and (min-width:1100px) {
    .content {
        grid-template-columns: repeat(4, 1fr) ;

    }

}