.content {
display: flex;
gap: 30px;
align-items: flex-start;
}
.single-page {
flex: 1;
}
.right-content {
flex: 0 0 300px;
padding-left: 0;
}
.right-content h5 {
font-size: 20px;
font-weight: 500;
color: var(--clr-black);
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--clr-green);
} .right-content .search {
margin-bottom: 40px;
}
.right-content .search form {
display: flex;
flex-direction: column;
gap: 10px;
}
.right-content .search input[type="text"] {
padding: 12px 15px;
border: 1px solid var(--clr-gray);
border-radius: var(--bor-radius-m);
font-size: 16px;
color: var(--clr-black);
background-color: var(--clr-white);
transition: border-color 0.3s ease;
}
.right-content .search input[type="text"]:focus {
outline: none;
border-color: var(--clr-green);
}
.right-content .search input[type="text"]::placeholder {
color: #999;
}
.right-content .search input[type="submit"] {
padding: 12px 20px;
background-color: var(--clr-green);
color: var(--clr-white);
border: none;
border-radius: var(--bor-radius-m);
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
.right-content .search input[type="submit"]:hover {
background-color: var(--clr-green-light);
} .sidebar-bottom {
margin-bottom: 40px;
padding: 20px;
background-color: var(--clr-gray);
border-radius: var(--bor-radius-l);
}
.side-block {
margin-bottom: 40px;
}
.side-block h5 {
font-size: 20px;
font-weight: 500;
color: var(--clr-black);
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--clr-green);
}
.side-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.side-block ul li {
margin: 0 0 15px 0;
padding: 0;
}
.side-block ul li:last-child {
margin-bottom: 0;
}
.side-block ul li a {
display: block;
padding: 10px 15px;
color: var(--clr-black);
text-decoration: none;
border-radius: var(--bor-radius-m);
transition: background-color 0.3s ease, color 0.3s ease;
font-size: 16px;
line-height: 140%;
}
.side-block ul li a:hover {
background-color: var(--clr-green-light);
color: var(--clr-white);
} @media screen and (max-width: 1024px) {
.content {
flex-direction: column;
}
.right-content {
flex: 1 1 100%;
width: 100%;
margin-top: 40px;
}
.sidebar-bottom {
margin-bottom: 30px;
}
.side-block {
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.right-content h5,
.side-block h5 {
font-size: 18px;
}
.right-content .search input[type="text"],
.right-content .search input[type="submit"] {
font-size: 14px;
padding: 10px 15px;
}
.side-block ul li a {
font-size: 14px;
padding: 8px 12px;
}
}